【CSS】Flex 컨테이너에서 Flex 아이템의 줄 바꿈 설정～ flex-wrap 속성

flex-wrap 속성은 Flex 컨테이너에서 Flex 아이템을 한 줄로 표시할 지, 또는 행(行)을 되풀이 해서 복수의 행(行)으로 표시할지 여부를 지정합니다.

flex-direction: row;

wrap

아래 예제와 같이, Flex 아이템이 Flex 컨테이너의 끝에 닿으면 문자의 표기 방향에 따라 줄 바꿈합니다.

우선 flex 컨테이너에서는 일반적으로 왼쪽에서 오른쪽으로의 가로 정렬 "flex-direction : row;"과 줄 바꿈 "flex-wrap : wrap;"을 지정하였습니다.

이 두 가지를 합쳐서 "flex-flow : row wrap;"으로 바꿔 기술하여도 똑같은 효과를 얻을 수 있습니다.

flex-flow 속성은 flex-direction과 flex-wrap을 합쳐 지정하는 단축 속성입니다. 초기 값은 row nowrap입니다.

[CSS] flex 컨테이너

#flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 90%;
	min-width: 500px;
	border:1px dotted #FF00FF;
　　}

"flex : auto;"을 지정함으로써, flex 컨테이너의 범위 안에서 flex 아이템이 늘어나거나 줄어듭니다.

이것은 "flex : flex-grow] [flex-shrink] [flex-basis]"= "flex : 1 auto;"로 지정하는 것과 동일합니다.

[CSS]　flex 아이템

 .flex-items｛
	flex: auto;
	min-width:110px;
	height: 50px;
	background:#999;
	border-radius: 2px;	
	margin:3px;
　　}

nowrap

줄 바꿈하지 않습니다. 한줄로 표시합니다. 초기 값입니다.

[CSS] flex 컨테이너

#flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 90%;
	min-width: 500px;
	border:1px dotted #FF00FF;
　　}

Flex 아이템은 Flex 컨테이너의 끝에 닿으면 컨테이너 내에 머물도록 flex 아이템의 크기를 조절되어 배치됩니다.

다만, Flex 항목에 폭(width)을 지정해 버리면, flex : auto가 기능을 하지 않게 되어, Flex 컨테이너 안에 들어 가지 않는 Flex 아이템은은 Flex 컨테이너의 표시 영역 밖으로 불거져 나와 버립니다.

[CSS] flex 아이템

 .flex-items｛
	flex: auto;
	height: 50px;
	background:#999;
	border-radius: 2px;	
	margin:3px;
　　}

wrap-reverse

Flex 컨테이너 행(行)에 들어가 있고 자르지 않은 경우, 줄바꿈을 하여 복수행(行)이 됩니다. 문자의 표기 방향과는 반대로 배치합니다.

[CSS] flex 컨테이너

#flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	width: 90%;
	min-width: 500px;
	border:1px dotted #FF00FF;
　　}

flex-direction: column;

wrap

nowrap

wrap-reverse