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.
CSS flex-wrap
property는 flex-item
요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.
시도해보기
여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. Using CSS flexible boxes
Syntax
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
Examples
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
/* 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 |
브라우저 호환성
BCD tables only load in the browser
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Mastering wrapping of flex items