flex & Grid

이진성·2022년 9월 10일
0

css

목록 보기
6/6

출처: 유노코딩(https://www.youtube.com/watch?v=4EYbDLkuIyw&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=15)

레이아웃(Layout)

구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술

대표적인 CSS 레이아웃 기술들

  • 일반적인 문서의 흐름
  • display 속성
  • flexbox
  • grid layout
  • float 속성
  • position 속성
  • 기타 등등

플렉스박스(flexbox)

플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다.

플렉스 박스에서, 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정

주요 용어

플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소

플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스 박스 방식으로 배치되는 요소

flexbox의 속성

flex-direction

플렉스 컨테이너의 주축을 결정하는 속성

행은 가로 축, 열은 세로 축을 의미

속성값의미
row기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일
row-reverse주축은 행이고 방향은 콘텐츠의 방향과 반대
column주축은 열이고 방향은 콘텐츠의 방향과 동일
column-reverse주축은 열이고 방향은 콘텐츠의 방향과 반대

flex-wrap

플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성

속성값의미
nowrap기본값, 공간이 부족하더라도 요소를 한줄에 배치
wrap공간 크기에 따라 요소가 여러 행에 걸쳐 배치
wrap-reversewrap과 동일하나 요소가 나열되는 시작점과 끝점이 반대

flex-flow

flex-direction과 flex-wrap을 함께 지정할 수 있는 단축 속성

justify-content

플렉스아이템들이 플렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정

속성값의미
flex-start기본값, 주축의 시작점으로 부터 끝점을 향해 배치
flex-end주축의 끝점으로 부터 시작점을 향해 배치
center주축의 중심부에 배치
space-between주축에서 일정한 간격을 둔 채 양끝 정렬 배치
space-around모든 요소가 동일한 여백을 갖도록 배치
space-evenly모든 요소 사이의 간격을 동일하게 유지해 배치

align-items

플렉스 컨테이너의 교차축 위에서 플렉스아이템들이 어떤 식으로 정렬될 것인지를 결정

속성값의미
stretch플렉스아이템이 교차축 길이에 맞춰 늘어남, but 너비 or 높이가 우선.
flex-start교차축의 시작점으로부터 끝점을 향해 배치
flex-end교차축의 끝점으로 부터 시작점을 향해 배치
center교차축의 중심부에 배치

align-self

각각의 플렉스아이템이 교차축에서 어떤식으로 정렬될 것인지를 스스로 결정

속성값의미
stretch플렉스아이템이 교차축 길이에 맞춰 늘어남, but 너비 or 높이가 우선.
flex-start교차축의 시작점으로부터 끝점을 향해 배치
flex-end교차축의 끝점으로 부터 시작점을 향해 배치
center교차축의 중심부에 배치

align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성

  • flex-wrap의 값이 wrap으로 지정되어 있을 때
  • 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때

위 조건이 만족되면서 여유 공간이 있을 때 동작

flex-grow

플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

속성값의미
숫자음수는 허용되지 않습니다. 양의 정수, 양의 실수 가능

flex-shrink

flex-grow의 반대

플렉스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성입니다.

속성값의미
숫자음수는 허용되지 않습니다. 양의 정수, 양의 실수 가능

flex-basis

플렉스아이템의 초기 크기를 지정합니다. box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정, 기본값은 auto

속성값의미
단위가 있는 값width 속성을 정의할 때와 동일한 방식

flex

flex는 flex-grow, flex-shrink, flex-basis 3가지 속성을 정의할 수 있는 단축 속성이다.

(순서는 grow, shrink, basis 순서)

order

플렉스아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다.

속성값의미
정수같은 값이면 코드 상의 순서대로!

Grid 레이아웃

격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식

그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정

주요 용어

그리드 컨테이너: 그리드 방식으로 레이아웃을 결정할 요소

그리드 아이템: 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소

fr: 사용가능한 공간에서 비율로 가진다.(1fr 2fr = 남은 공간을 1:2로 가진다.)

Grid 레이아웃의 속성

grid-template-columns

그리드 컨테이너의 트랙 중 열(column) 트랙 내 아이템들의 크기를 지정할 수 있는 속성

※ 그리드 컨테이너에서 트랙이란 행 또는 열을 의미

속성값의미
none기본값, 명시한 값이 없으므로 암묵적으로 값이 정해진다.
수치길이를 나타내는 음수가 아닌 값을 지정
그 외다양한 키워드나 CSS 함수를 사용해 지정하기도 한다.

grid-template-rows

그리드 컨테이너의 트랙 중 행(row) 트랙 내 아이템들의 크기를 지정할 수 있는 속성

속성값의미
none기본값, 명시한 값이 없으므로 암묵적으로 값이 정해진다.
수치길이를 나타내는 음수가 아닌 값을 지정
그 외다양한 키워드나 CSS 함수를 사용해 지정하기도 한다.

gap(grid-gap)

그리드 아이템 사이의 간격을 지정하는 속성

행에서의 간격과 열에서의 간격을 똑같이 지정할 수 있고, 따로 지정할 수도 있다.

row-gap, column-gap의 단축속성

속성값의미
normal기본값, 명시한 값이 없는 기본적인 상태
수치길이를 나타내는 값을 지정. 다양한 단위 사용 가능

트랙 관련 함수

그리드 컨테이너의 트랙(행과 열) 크기를 지정할 때 사용할 수 있는 유용한 함수들

속성값의미
repeat()반복되는 값을 자동으로 처리할 수 있는 함수
minmax()최솟값과 최댓값을 각각 지정할 수 있는 함수
auto-fill & auto-fit반응형을 고려해 사용할 수 있는 키워드들(함수 X)

grid-column & grid-row

그리드 컨테이너의 줄 번호를 이용해 아이템을 배치할 수 있다.

grid-column과 grid-row는 단축 속성이다.

  • grid-column: grid-column-start와 grid-column-end의 단축 속성
  • grid-row: grid-row-start와 grid-row-end의 단축 속성

grid-template-areas

그리드 영역(아이템)의 이름을 이용해 레이아웃의 형태를 정의할 수 있다.

grid-area

그리드 영역(아이템)의 이름을 지정할 때 사용하는 속성

align-items

플렉스박스 방식에서와 유사한 역할

그리드 컨테이너 행 트랙의 높이를 기준으로 그리드 아이템의 배치를 결정

속성값의미
stretch기본값. 그리드 아이템들이 트랙 높이만큼 확장
start트랙 상단으로부터 하단을 향해 배치
end트랙 하단으로부터 상단을 향해 배치
center할당된 공간의 중심부에 배치

align-self

각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정

속성값의미
stretch기본값. 그리드 아이템들이 트랙 높이만큼 확장
start트랙 상단으로부터 하단을 향해 배치
end트랙 하단으로부터 상단을 향해 배치
center할당된 공간의 중심부에 배치

justify-items

수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성, 그리드 컨테이너에 지정

아이템에 할당된 열 방향 너비가 기준이 된다.

속성값의미
stretch기본값. 그리드 아이템들이 트랙 너비만큼 확장
start트랙 시작점으로부터 끝점을 향해 배치
end트랙 끝점으로부터 시작점을 향해 배치
center할당된 공간의 중심부에 배치

justify-self

수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용하는 속성

각각의 그리드 아이템에 지정

align-items & align-self와 유사

속성값의미
stretch기본값. 그리드 아이템들이 트랙 너비만큼 확장
start트랙 시작점으로부터 끝점을 향해 배치
end트랙 끝점으로부터 시작점을 향해 배치
center할당된 공간의 중심부에 배치

align-content

플렉스박스 방식과 유사하게 사용

그리드 컨테이너의 수직축(열방향)에서의 아이템 정렬 방식을 결정

컨테이너의 여유 공간이 있을 대 사용할 수 있다.

속성값의미
start트랙의 시작점으로부터 끝점을 향해 배치
end트랙 끝점으로부터 시작점을 향해 배치
center트랙의 중심부에 배치
space-between트랙에서 일정한 간격을 둔 채 양끝 정렬 배치

justify-content

플렉스박스 방식과 유사하게 사용

그리드 컨테이너의 수평축(행방향)에서의 아이템 정렬 방식을 결정

컨테이너의 여유 공간이 있을 대 사용할 수 있다.

속성값의미
start트랙의 시작점으로부터 끝점을 향해 배치
end트랙 끝점으로부터 시작점을 향해 배치
center트랙의 중심부에 배치
space-between트랙에서 일정한 간격을 둔 채 양끝 정렬 배치
profile
좋은 소스 코드를 연구하는 개발자

0개의 댓글