flex-wrap 속성

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

구문

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

값

기본값: nowrap.

예제 . wrap 값

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

html<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>

css#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 값

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

html<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>

css#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보다 작아진 점을 주목하세요:

html<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>

css#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 속성은 무시되지 않습니다. 모두 들어갈 수 있도록 블록 개수를 줄여봅시다:

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

css#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;
}

Результат:

함께 보기