화면 구성하기 - FlexBox 모델

 

 

 

 

화면 정렬, float, 그리고 flex와 grid

화면을 만들려면 컨테이너의 배치 방법을 알아야 합니다.

그중 기본적으로 수행하는것이 바로 컨테이너의 수직, 수평정렬입니다.

 

예전에는 inline 또는 float를 사용하여 정렬을 수행하였습니다.

하지만, inline 같은 경우는 margin이 존재하지 않더라도 여백이 생기게 되고,

float의 경우 다른 컨테이너 구조에 영향을 주게 됩니다.

 

이러한 문제점을 해결하기 위해 최근에는 flexbox 나 grid를 활용하여 정렬을 하고 있습니다.

이번 글에서는 flexbox에 대한 개념을 정리해보겠습니다.

 

 

 

 

display : flex 

flexbox 모델은 주축을 기준으로 컨테이너를 정렬하는 선형적 배치방법입니다.

부모가 되는 컨테이너, 자식의 역할을 하는 아이템,

진행 축인 주축과 교차되는 축인 교차축, 총 4가지로 구성되어있습니다.

 

flex container main axis cross axis

item1

item2

item3

 

위의 그림에 대해 구성요소를 설명하자면

 

flex container (컨테이너) : 부모 컨테이너 아이템을 의미합니다.

main axis (주축) : 주 방향과 일치되는 축입니다. 가로가 기본 값입니다.

cross axis (교차축) : 주축과 직각으로 위치한 축으로, 세로축이 기본값입니다..

flex item (아이템) : 자식 컨테이너 아이템을 의미합니다. 상속에 따라 flex item이 flex container가 될 수도 있습니다.