Flex란?

Flexible box, Flexbox라고 불립니다.
레이아웃 배치 전용 기능으로, 레이아웃을 편리하게 할 수 있는 기능이에요.

<div class="container">
	<div class="item">flex1</div>
	<div class="item">flex2</div>
	<div class="item">flex3</div>
</div>

flex 기본 구조

• 부모 요소(컨테이너)와 자식 요소(플렉스 아이템)가 필수로 존재해야 합니다.

따라서 속성도

• 컨테이너에 적용하는 속성
• 아이템에 적용하는 속성

두 가지로 나뉩니다.

컨테이너에 적용하는 속성

display: flex;

flex를 사용하기 위해 가장 먼저 flex 컨테이너에 display: flex;부터 걸어줍니다.(필수)

.container {
	display: flex;
}

flex-direction;

flex아이템들이 배치되는 축을 결정하는 속성입니다.

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

row (기본값) | 아이템들이 행(가로)으로 정렬됩니다.
row-reverse | 아이템들이 역순으로 행(가로) 정렬됩니다.
column | 아이템들이 열(세로)로 정렬됩니다.
column | 아이템들이 역순으로 열(세로) 정렬됩니다.

flex-wrap

컨테이너의 크기 부족으로 아이템을 전부 정렬하지 못할 때,
아이템 줄바꿈을 어떻게 할지 결정하는 속성입니다.

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

nowrap(기본값) | 줄바꿈 없음. 넘치면 컨테이너를 삐져나감
wrap | 줄바꿈 함
wrap-reverse | 역순으로 줄바꿈 함(위로 올라갑니다.)

flex-flow;

flex-direction과 flex-wrap를 동시 지정합니다.
(flex-direction, flex-wrap의 순으로 한 칸 떼서 써주시면 됩니다.)

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}