📌 display: flex;

웹이 형태가 다양해지고, 표시되는 기기가 다양해지면서 요소의 배치도 유연해질 필요성이 생겼습니다. 레이아웃을 좀 더 사용자 친화적으로 제공할 수 있는 모던 레이아웃 기법인 flex에 대해 살펴보겠습니다.

Flexible Box Layout Module

플렉시블 레이아웃은 기존에 사용했던 display 속성에 flex 또는 inline-flex를 지정하여 적용할 수 있습니다.

div {
	display: flex;
}

div {
	display: inline-flex;
}

Flexbox의 기본 개념

Flexible Box Module은 display: flex로 지정된 플렉스 컨테이너 안에서 아이템을 배치할 때 하나의 행 또는 하나의 열로 배치되는 1차원 레이아웃 모델입니다.

플렉스 컨테이너 안에서 아이템의 배치는 주축(Main Axis)과 교차축(Cross Axis)에 의해 결정되며 주축을 결정하는 요인은 flex-direction 속성 값 입니다.

플렉스 박스 완벽 가이드(A Complete Guide to Flexbox)

📌 flex-direction

flex-direction은 요소 박스의 배치 방향을 지정하는 속성입니다. flex-direction 속성은 요소 박스가 반드시 display 속성 값으로 flex 또는 inline-flex로 지정되어 있어야 하며, row, column, rowreverse, column-reverse 등의 속성 값을 지정하여 flex 박스에 포함된 자식 요소 박스를 가로 또는 세로 방향이나 역방향으로 표시합니다.