[CSS] Display 속성 (flex)

display: flex속성은 하나의 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex속성이 적용 된 container가 부모 요소인 flex container가 되고, 하위 요소인 item은 자식 요소인 flex item이라고 부릅니다.

✔ flex container 속성
flex-direction, flex-wrap, justify-content, align-items, align-content
✔ flex item 속성
flex, flex-grow, flex-shrink, flex-basis, order

✔ flex-direction

item 요소들의 방향을 결정하는 속성입니다.

.container{flex-direction: row;}

✔ row (기본값) : 주 축이 글의 작성 방향과 동일합니다.
✔ row-reverse : row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치 합니다.
✔ column : 추 죽이 블록 축과 동일합니다.
✔ column-reverse : column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치 합니다.

✔ justify-content

item의 메인 축을 정렬하는 속성입니다.

.container{justify-content: flex-start;}

✔ flex-start (기본값) : 시작 지점을 기준으로 정렬합니다.
✔ flex-end : 메인 축의 마지막 지점을 기준으로 정렬합니다.
✔ center : 메인 축의 item을 가운데 정렬합니다.
✔ space-between : item들 사이에 동일한 간격으로 정렬합니다.
✔ space-around : item 둘레에 동일한 간격으로 정렬합니다.

✔ align-items

item의 수직 축을 정렬하는 속성입니다.

.container{align-items: stretch;}

✔ stretch (기본값)
✔ flex-start : 수직 축의 시작 지점을 기준으로 item을 정렬합니다.
✔ flex-end : 수직 축의 마지막 지점을 기준으로 item을 정렬합니다.
✔ center : 수직 축의 item을 가운데 정렬합니다.
✔ baseline : 글꼴의 기준선인 baseline을 기준으로 정렬합니다.

✔ flex-shrink

item의 축소 너비 비율을 설정 하는 속성입니다.
속성 값은 양의 정수를 사용합니다.

.item{flex-shrink: 0;}

기본 값은 1이며, 값이 0일 경우 너비가 축소되지 않고 원래 크기가 유지됩니다.
속성 값이 1 이상이고 container의 전체 너비보다 item 요소의 너비가 클 경우 container요소 내부에서 item의 요소 너비가 축소됩니다.