1차원 레이아웃 구조(x축, y축 중 1개의 축만 사용)로 각각의 요소를 수평 정렬하거나 수직 정렬할 때 사용
flex-direction 속성을 통해 x축, y축 중 1개의 축을 주축으로 정하면 나머지 축은 교차축이 된다. 주축과 교차축은 고정되어 있지 않고 상대적인 개념이기 때문에 flex-direction 속성으로 주축, 교차축을 정하는 것이 전제가 되어야 한다.
Flex container
display
flex : block 요소와 비슷. 수직, 가로 너비가 최대한 늘어나려고 함
inline-flex : inline 요소와 비슷. 수평, 가로 너비가 최대한 줄어들려고 함. 글자를 다루는 경우를 위한 요소
flex-direction : 어느 축을 사용해서 정렬될 것인지를 결정해주는 속성
row : 행(줄), 주축은 x축, 교차축은 y축
column : 열(칸), 주축은 y축, 교차축은 x축
row-reverse : flex-start, flex-end가 row와 반대
column-reverse : flex-star, flex-end가 column와 반대
flex-wrap
nowrap : 줄바꿈 처리가 되지 않음(flex-shrink의 속성이 기본값인 상태에서는 요소 크기가 줄어든다)
wrap : 자식 요소들의 너비가 부모 요소의 커지면 줄바꿈 된다
wrap-reverse : 줄바꿈이 반대 방향으로 된다
justify-content : container에서 아이템 그룹을 flex-start 지점에 정렬할 것인지, flex-end 지점에 정렬할 것인지 등등을 지정하는 속성
flex-start
flex-end
center
space-between : (주축을 기준으로) 첫번째 요소를 시작 지점에, 마지막 요소를 끝 지점에 놓고, 사이 공간을 균등하게 분배해서 정렬
space-around : (주축을 기준으로) 각각의 아이템의 양 옆에 공간을 균등하게 분배해서 정렬, 첫번째 요소의 왼쪽과 마지막 요소의 오른쪽에도 공간이 생기는 게 특징
align-items : 교차축에 해당되는 개념. 1줄에 대한 정렬을 지정
stretch : 기본값. 요소의 높이값이 정해져있지 않으면 부모 요소의 높이값만큼 요소 높이를 늘린다.
flex-start : 교차축의 시작 지점을 기준으로 정렬을 만들어낼 수 있다.
flex-end : 교차축의 끝 지점을 기준으로 정렬을 만들어낼 수 있다.
center
baseline : 문자의 기준선을 기준으로 정렬
align-content : 교차축에 해당되는 개념. 2줄 이상 아이템이 쌓여있을 때 정렬을 지정(flex-wrap 속성이 wrap 이어야지만 유효)
stretch : 기본값
flex-start : 교차축의 시작 지점을 기준으로 정렬을 만들어낼 수 있다.
flex-end : 교차축의 끝 지점을 기준으로 정렬을 만들어낼 수 있다.
center
space-between : (교차축을 기준으로) 첫번째 요소를 시작 지점에, 마지막 요소를 끝 지점에 놓고, 사이 공간을 균등하게 분배해서 정렬
space-around : (교차축을 기준으로) 각각의 아이템의 위아래 공간을 균등하게 분배해서 정렬. 첫번째 요소의 위쪽과 마지막 요소의 아래쪽에도 공간이 생기는 게 특징
Flex items
flex-grow : 증가되는 너비의 비율
0 : 기본값(증가되지 않음)
기본 너비를 제외한 나머지 너비에 대한 증가 비율을 지정하는 것
flex-shrink : 감소되는 너비의 비율
1 : 기본값(감소됨)
0을 지정하면 요소가 자동으로 감소되지 않게 막을 수 있다
flex-basis : 요소의 기본 너비를 설정
auto : 기본값 (auto가 아니면 width나 height 값은 무시 됨)
flex : grow shrink basis 순으로 한 번에 지정해줄 수 있는 단축 속성
기본값은 flex: 0 1 auto
flex: 1 만 적으면 flex-basis 값이 기본값인 auto가 아니라 0이 들어감
order
기본값은 0
숫자가 증가할 수록 순서가 밀리게 된다
음수도 지정 가능
align-self : 개별 아이템의 교차축 정렬을 만들어줄 수 있다
기본값은 auto : container에 지정되어 있는 align-items의 값을 상속 받음
align-items 의 값을 모두 사용 가능
CSS Grid
2차원의 레이아웃 구조(x축, y축 2개의 축 사용) 작업할 때 사용
x축, y축, 둘 모두 사용하기 때문에 flex와 달리 행축, 열축으로 축이 고정되어 있다.
특징
CSS grid에는 line이 있다. 맨 위/맨 왼쪽부터 1번, 2번, 3번... 순으로 line 번호가 매겨진다. 맨 아래/맨 오른쪽부터 -1번, -2번, -3번...과 같이 음수 번호도 함께 매겨진다.
행과 열 사이의 공백은 gutter라고 부른다.
fraction 개념
grid는 표를 만들 때처럼 grid-template-rows, grid-template-columns를 통해 내가 사용할 셀을 미리 정의한다. 하지만 요소가 내가 미리 정의한 셀을 넘어간다면? 내가 미리 정의한 영역을 명시적 영역이라고 하고, 내가 정의하지 않은 영역을 암시적 영역이라고 한다.
Grid Container
display : flex의 display 속성과 비슷
grid
inline-grid
grid-template-rows : 행축(px, fr 사용 가능)을 기준으로 구역 정의
grid-template-columns : 열축(px, fr 사용 가능)을 기준으로 구역 정의
grid-auto-rows, grid-auto-columns: 암시적 영역에 대한 행과 열 크기 지정
grid-auto-flow
row : 기본값. 행축을 기준으로 정렬
column : 열축을 기준으로 정렬
dense : 빈 공간을 메워 정렬. dense만 입력하면 row가 생략된 것. 열축을 기준으로 빈 공간을 메우게 하고 싶다면 column dense를 입력하면 된다.
justify-content : 전체 영역에서 행축에 빈 공간이 있을 때
normal : 기본값(flex의 stretch와 같음)
center
start
end
space-between
space-around
space-evenly : 모든 여백을 균일하게 분배하여 정렬
align-content : 전체 영역에서 열축에 빈 공간이 있을 때
normal : 기본값(flex의 stretch와 같음)
center
start
end
space-between
space-around
space-evenly
justify-items : 1개의 셀 영역 안에서 행축을 기준으로 빈 공간이 있을 때
normal : 기본값(flex의 stretch와 같음)
center
start
end
align-items : 1개의 셀 영역 안에서 열축을 기준으로 빈 공간이 있을 때
normal : 기본값(flex의 stretch와 같음)
center
start
end
grid-template-areas
각 요소마다 grid-area로 이름을 지정해준다
예시
grid-template-areas:
"header header header"
"main main aside"
". . aside" /* . 대신 none을 써도 된다 */
"footer footer footer";
/* 중략 */
header { grid-area: header; } /* 이름을 지정할 때 따옴표 붙이지 않기 */
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
grid-gap
(예시) 10px 40px 값을 넣으면 행간 여백은 10px, 열간 여백은 40px;
grid-row-gap 과 grid-column-gap의 단축 속성
앞에 grid 빼고 gap 키워드로도 사용 가능
Grid Item
개발자 도구로 grid의 line 번호 확인하기
grid-row
grid-row-start, grid-row-end의 단축 속성
예) 1 / 3
grid-column
grid-column-start, grid-column-end의 단축 속성
(예시) 1 / 3
(예시) 값이 4라면 열축의 4번 라인을 시작점으로 한다는 뜻
(예시) 값이 span 3 이라면 3개 라인만큼 확장한다는 뜻(번호가 아니라 개수)
(예시) 값이 2 / span 2 이라면 2번 라인에서 시작해서 2개 라인만큼 확장한다는 뜻(번호가 아니라 개수)
justify-self : 개별 요소 정렬
align-self : 개별 요소 정렬
order : 개별 요소 순서 설정
요소를 겹치게 해주려면 명시적으로 grid-row, grid-column을 지정해주어야 한다.
