FLEX BOX

정해진 컨테이너 범위 크기에 맞춰 내부 요소에 정해진 규칙에 따라 자동으로 공간으로 배분함

display

display : flex ;

main axis 주축
cross axis 교차축

flex-dirextion

주축의 배치 방법을 결정하는 속성

• row 좌->우 방향

• row-reverse 우->좌 방향

• column 상->하 방향

• column-reverse 하->상 방향

justify-content

주축을 기준으로 요소와 컨텐츠를 어떻게 배치할 지 결정하는 속성

• flex-start

• flex-end

• center

• space-between

• space-around

• space-evely

flex-wrap

주축이 수평일 때 새로운 행을, 주축이 수직일 때 새로운 열을 만들어 요소를 정렬하는 속성

• wrap

• wrap-reverse

• nowrap

align-items

교차축을 기준으로 요소와 컨텐츠를 어떻게 배치할 지 결정하는 속성

• flex-start

• flex-end

• center

• space-between

• space-around

• space-evely

• baseline 텍스트 요소를 기준으로 정렬

align-content

2줄 이상의 행, 열 구성 시 교차축을 따라 요소들 사이 간격을 조정하는 속성

align-self

flex 컨테이너 내 하나의 요소만 교차축을 따라 조정하는 경우

flex

flex : flex-grow (단위X) | flex-shrink (단위X) | flex-basis

flex-basis

요소가 배치될 때의 최초 크기 (주축 방향에 따라 너비 or 높이로 인식)

flex-grow

여유 공간이 있을 때 유동적으로 크기 확대

• min-width
• max-width

flex-shrink

공간이 부족할 때 유동적으로 크기 축소