flex 컨테이너를 만듭니다.

display: flex;

flex-direction

• main axis를 정의합니다.
• 이때, cross axis는 main axis와 반대입니다.

flex-direction: row | row-reverse | column | column-reverse; // 기본값: row

flex-wrap

• 여러 줄에 걸쳐 래핑할 수 있습니다.

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow

• flex-direction + flex-wrap

flex-flow: row wrap;

flex-basis

• 기본값: content
• number로 설정 시 그 값 이상으로도 유연하게 늘어날 수 있습니다.

flex-basis: auto | number | content;

flex-grow

• flex 아이템이 남는 공간을 얼마나 차지할지 비율로 결정합니다.
• 모든 아이템에 같은 값을 주면 공간이 동일하게 나뉘고, 값이 다르면 비율에 따라 분배됩니다.
• 예를 들어 2:1:1의 값이면, 남는 공간을 4등분해 첫 번째 아이템이 2부분, 나머지는 1부분씩 가집니다.

flex-shrink

• 공간이 부족할 때 아이템이 얼마나 줄어들지를 비율로 조절합니다.
• 값이 클수록 더 많이, 더 빨리 줄어들며, min-content 크기 이하로는 줄어들지 않습니다.

justify-content

• main axis 정렬

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

align-items

• cross axis 정렬

align-items: stretch | flex-start | flex-end | center | baseline;

align-content

• **flex-wrap: wrap;**이 설정된 상태에서, 2줄 이상이 됐을 때 cross axis 방향 정렬

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;