코맛

flex는 수평정렬을 할 때 사용한다.

아래를 보면

blue는 부모요소이며 이를 flex container라고 부른다.

부모요소 안에 있는 나머지 색상들은 flex item이라고 지칭한다.

flex-direction

주 축(Main-axis)을 설정한다. 즉, 수평정렬 또는 수직정렬을 할 것 인지 결정한다.

default는 row(좌->우)로 설정되어 있으며

row-reverse(우->좌)

column(위->아래)

column-reverse(아래->위)

로 설정이 가능하다.

flex-wrap

Flex items묶음(줄바꿈)여부를 설정한다.

default 는 nowrap(줄바꿈 없음) 이며 wrap으로 설정하여 여러 줄로 묶어 줄바꿈을 할 수 있다.

flex-wrap은 다음 사진이 가장 잘 설명해주는 것 같아 현재 패캠에서 듣고 있는 강의자료를 퍼왔다.

justifyy-content

주 축(Main-axis)의 정렬방법을 설정한다.

default는 flex-start이며 flex items를 시작점으로 정렬한다.

flex-end, center로 정렬방법을 설정할 수 있다.

align-content

교차 축(Cross-axis)의 여러 줄 정렬 방법을 말한다.

(한 줄인 경우는 작동을 안한다)

default는 stretch 이며 flex-start, flex-end, center 로 설정이 가능하다.

만약, 한 줄만 있는 경우는 align-items를 이용하여 정렬을 하면된다.

flex-basis

Item의 기본 너비 설정을 한다. 

default는 auto로 설정되어 있다.

flex-grow

Flex item의 증가 너비 비율을 설정한다.

default는 0로 설정되어있다.

flex-shrink

Flex item의 감소 너비 비율을 설정한다.

default는 1로 설정되어있다.

*주의사항!

auto 값을 가지지 않은 flex-basis와 width(flex-direction: column인 경우 height) 값을 동시에 적용한 경우 flex-basis가 우선합니다.