flex-wrap 속성

flex-wrap 속성은 주축을 따라 블록을 멀티라인으로 배치하는 방법을 지정합니다. flex 블록의 부모 요소에 적용됩니다. 단축 속성 flex-flow에 포함됩니다.

구문

선택자 {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

값

값	설명
`nowrap`	싱글라인 모드 - 블록들이 한 줄로 배치됩니다.
`wrap`	블록들이 한 줄에 다 맞지 않으면 여러 줄로 배치됩니다.
`wrap-reverse`	`wrap`과 동일하지만, 블록들이 역순으로 배치됩니다 (먼저 마지막, 그 다음 첫 번째).

기본값: nowrap.

예제 . wrap 값

현재 블록들이 컨테이너에 맞지 않아 여러 줄로 배치될 것입니다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . wrap-reverse 값

이번에는 배치 순서가 반대로 바뀝니다 (블록 안의 숫자를 보세요):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . nowrap 값

현재 블록들은 싱글라인 모드(기본값)로 배치됩니다. 이 경우, 블록에 지정된 width 값은 블록들이 부모에 맞는 데 방해된다면 무시됩니다. 블록들이 부모 안에 들어갔지만 실제 너비가 지정된 100px보다 작아진 점을 주목하세요:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

예제 . nowrap 값

그러나, 블록들이 지정된 너비로 모두 들어갈 수 있다면 width 속성은 무시되지 않습니다. 모두 들어갈 수 있도록 블록 개수를 줄여봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

함께 보기

flex 블록의 축 방향을 지정하는 속성 flex-direction
주축을 따른 정렬을 지정하는 속성 justify-content
교차축을 따른 정렬을 지정하는 속성 align-items
flex-direction과 flex-wrap의 단축 속성 flex-flow
flex 블록의 순서를 지정하는 속성 order
개별 블록의 정렬을 지정하는 속성 align-self
특정 flex 블록의 크기를 지정하는 속성 flex-basis
flex 블록의 확장 비율을 지정하는 속성 flex-grow
flex 블록의 축소 비율을 지정하는 속성 flex-shrink
flex-grow, flex-shrink, flex-basis의 단축 속성 flex