flex-wrap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.

시도해 보기

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. Using CSS flexible boxes

Syntax

css

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;

flex-wrap 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.

Values

아래는 사용 가능한 속성값들입니다:

nowrap: 기본 설정값으로, flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치합니다. 시작점은 flex-direction 에 의해 결정된 방향으로 적용됩니다.
wrap: flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. nowrap 속성과 마찬가지로 요소가 배치되는 시작점은 flex-direction 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.
wrap-reverse: wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.

Formal syntax

flex-wrap = 
  nowrap        |
  wrap          |
  wrap-reverse

Examples

HTML

html

<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS

css

/* Common Styles */
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 50%;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/* Flexbox Styles */
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}

Results

명세서

Specification
CSS Flexible Box Layout Module Level 1 # flex-wrap-property

초기값	`nowrap`
적용대상	flex containers
상속	no
계산 값	as specified
Animation type	discrete