CSS FLEXBOX

Flexbox는 열 또는 행으로 아이템을 배치할 수 있는 일차원 layout method입니다. 페이지의 contents 상자 안에 아이템을 배치하는데 사용합니다. flexbox를 사용하면 화면의 크기에 따라 공간을 적절히 분배해줘 편리하게 layout을 구성할 수 있습니다. 여기에서는 flexbox의 property를 정리하겠습니다.

1. display: flex
flexbox를 사용하기위해선 먼저 container가 되는 element에 display:flex를 추가해야합니다. 그 flexbox의 안에는 두개의 축이 있습니다.

flex axis

main axis의 기본 방향은 왼쪽에서 오른쪽입니다. 아이템은 주축의 방향으로 배치됩니다. 아래 이미지들에서 아이템의 순서는 html문서 상 빨주노초파남보 순서로 컨테이너 안에 존재합니다.

2. flex-direction: row | row-reverse | column | column-reverse
컨테이너 안에서 main axis의 방향을 결정하는 property입니다.
row는 왼쪽에서 오른쪽, row-reverse는 오른쪽에서 왼쪽, column은 위에서 아래, column-reverse는 아래에서 위 방향입니다.

row	row-reverse	column	column-reverse

 

3. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly 
main axis를 따라 어떻게 아이템을 배치할지 결정하는 property입니다.
flex-start, flex-end, center: main axis의 시작, 끝, 중간에 배치합니다.
space-between: 바깥 여백을 없애고 아이템 사이의 공백을 동일하게 해줍니다. 즉 아이템 사이에만 빈 곳이 생깁니다.
space-around: 아이템 주위에 똑같은 면적의 여백을 줍니다. 아이템 주위에 공백이 2만큼 생긴다고 하면 아이템 사이의 공백은 양쪽에서 2씩 총 4가 되지만, 양 끝은 한쪽의 공백만 있으므로 2가됩니다.
space-evenly: 양끝의 공백, 아이템 사이의 공백을 모두 동일하게 해줍니다.

flex-start	flex-end	center
space-between	space-around	space-evenly

 

4. flex-wrap: wrap | wrap-reverse | nowrap
main axis가 수평일 때 새로운 행을 만들어 요소를 정렬하거나, main axis가 수직일때는 새로운 열을 만들어 요소를 정렬하는 property입니다. 새로 만들어지는 행이나 열에서 item을 배치하는 방향은 main axis의 방향을 따라갑니다.
main axis가 세로라면 cross axis는 가로가 되고, main axis가 가로라면 cross axis는 세로가 됩니다. 
wrap: cross axis을 따라서 정렬합니다. 세로라면 위에서 아래방향, 가로라면 왼쪽에서 오른쪽입니다.
wrap-reverse: cross axis의 방향이 반대가 됩니다. 세로라면 아래에서 위 방향, 가로라면 오른쪽에서 왼쪽입니다.
nowrap(default): 새로운 열을 만들지 않고 크기를 조절합니다.

wrap	wrap-reverse	nowrap

justify-content: row일 때 상황입니다. main axis는 왼쪽에서 오른쪽입니다. wrap일때 cross axis는 위에서 아래방향이므로 밑으로 한 줄이 더 생겨 아이템을 정렬합니다. wrap-reverse는 아래에서 위 방향이므로 위쪽으로 한 줄이 더 생겨 아이템을 정렬합니다.

5. align-items: flex-start | flex-end | center | baseline
cross axis를 따라 아이템을 배치합니다.
flex-start, flex-end, center: cross axis의 시작점, 끝, 중간을 따라 배치합니다.
baseline: 텍스트의 아래를 일직선상에 오도록 정렬합니다.

flex-start	flex-end
center	baseline

 6. align-content: flex-start | flex-end | center | space-between | space-around | space-evenly 
행이나 열이 여러개일 때 cross axis를 따라 배치하는 방법을 정합니다. 즉, 행과 열 사이의 공백을 결정합니다. 여러 행, 열이 있을 때만 사용하는 정렬 방법입니다. 따라서 flex-wrap을 적용한 상태로 사용해야합니다.
flex-start, flex-end, center: cross axis의 시작, 끝, 중간에 배치합니다.
space-between: 바깥 여백을 없애고 행 또는 열 사이의 공백을 동일하게 해줍니다. 즉 행 또는 열 사이에만 빈 곳이 생깁니다.
space-around: 행 또는 열 주위에 똑같은 면적의 여백을 줍니다. 행 또는 열 주위에 공백이 2만큼 생긴다고 하면 행 또는 열의 공백은 양쪽에서 2씩 총 4가 되지만, 양 끝은 한쪽의 공백만 있으므로 2가됩니다.
space-evenly: 양끝의 공백, 행 또는 열 사이의 공백을 모두 동일하게 해줍니다.

flex-start	flex-end	center
space-between	space-around	space-evenly

7. align-self: flex-start | flex-end | center 
align-items와 비슷하지만 단일 요소에 사용합니다. flex container 자체에는 사용하지 않습니다. cross axis를 기준으로 배열 된 단일 요소의 위치를 바꿀 수 있습니다. 아래 표는 가운데 있는 요소만 align-self를 적용한 것입니다.

flex-start	flex-end	center

8. flex-basis
flex-basis는 요소가 flex container에 배치될 때 주축 방향의 initial size을 나타냅니다.

각 div의 width는 200px이지만 main axis를 따라 flex-basis의 영향을 받아서 300px가 되었습니다.

9. flex-grow

flex-grow는 빈 공간이 있을 때 요소가 그 공간을 얼마나 차지할지 정합니다. 단위가 없는 숫자를 value로 가집니다.

남는 공간을 div1, div2, div3가 1:2:3의 비율로 차지합니다. 잘 안보인다면 0.25배로 해보세요.

10. flex-shrink
container에 남는 공간이 없을 때 줄어드느 비율을 결정합니다.

div1, div2, div3의 줄어드는 비율이 1:2:3입니다.

11. flex short hand
flex- grow, flex-shrink, flex-basis의 순서로 shorthand를 사용할 수 있습니다.

/* flex-grow:1; flex-shrink:2; flex-basis:10% */
flex: 1 2 10%;

/* flex-grow:1; flex-shrink:2; */
flex: 1 2;

/* flex-grow:1; flex-basis:10%; */
flex: 1 10%;