Flex Containers 속성 - display

Flex Container를 위한 속성들은 다음과 같다.
주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴본다.

속성	의미
display	Flex Container를 정의
flex-flow	flex-direction와 flex-wrap의 단축 속성
flex-direction	Flex Items의 주 축(main-axis)을 설정
flex-wrap	Flex Items의 여러 줄 묶음(줄 바꿈)설정
justify-content	주 축(main-axis)의 정렬 방법을 설정
align-content	교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
align-items	교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)

 

 

display

display 속성으로 Flex Container를 정의한다.
보통 요소의 표시 방법을 display: block;, display: inline-block 혹은 display: none; 같이 사용하는 경우가 많다.
같은 요소의 표시 방법으로 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의한다.

값	의미
flex	Block 특성의 Flex Container를 정의
inline-flex	Inline 특성의 Flex Container를 정의

flex와 inline-flex는 차이는 단순하다.
display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가진다.

여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의한다.
두 값의 차이는 내부에 Items에는 영향을 주지 않는다.

 

Container와 Items 정렬의 차이점

그림에서 보면 알 수 있듯이, Items의 정렬방식은 똑같다. 하지만 Container는 블록요소 혹은 인라인요소로 정렬방식이 다르다.