가장 간단하고 안정적인 솔루션은 올바른 위치에 플렉스 아이템을 삽입하는 것입니다. 너비가 충분하면 ( width: 100%) 줄 바꿈을 강요합니다.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(4n - 1) {
background: silver;
}
.line-break {
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="line-break"></div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="line-break"></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="line-break"></div>
<div class="item">10</div>
</div>
그러나 그것은 추악하고 의미 론적이지 않습니다. 대신, 플렉스 컨테이너 안에 의사 요소를 생성 order하여 올바른 위치로 옮길 수 있습니다.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(3n) {
background: silver;
}
.container::before, .container::after {
content: '';
width: 100%;
order: 1;
}
.item:nth-child(n + 4) {
order: 1;
}
.item:nth-child(n + 7) {
order: 2;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
그러나 플렉스 컨테이너 ::before에는 ::after의사 요소 만있을 수 있습니다 . 즉, 줄 바꿈을 2 번만 수행 할 수 있습니다.
이를 해결하기 위해 플렉스 컨테이너 대신 플렉스 아이템 내에 의사 요소를 생성 할 수 있습니다. 이렇게하면 2로 제한되지 않지만 의사 요소는 플렉스 항목이 아니므로 줄 바꿈을 강요 할 수 없습니다.
그러나 운 좋게도 CSS Display L3 가 도입했습니다 display: contents(현재 Firefox 37에서만 지원됨).
요소 자체는 상자를 생성하지 않지만 그 하위 요소와 의사 요소는 여전히 정상적으로 상자를 생성합니다. 상자 생성 및 레이아웃을 위해 요소는 마치 문서 트리에서 하위 요소 및 의사 요소로 대체 된 것처럼 처리해야합니다.
따라서 display: contents플렉스 컨테이너의 자식에 적용 하고 각 랩의 내용을 추가 래퍼로 래핑 할 수 있습니다 . 그런 다음 flex 항목은 추가 래퍼 및 하위 요소의 의사 요소가됩니다.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
display: contents;
}
.item > div {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item:nth-child(3n) > div {
background: silver;
}
.item:nth-child(3n)::after {
content: '';
width: 100%;
}
<div class="container">
<div class="item"><div>1</div></div>
<div class="item"><div>2</div></div>
<div class="item"><div>3</div></div>
<div class="item"><div>4</div></div>
<div class="item"><div>5</div></div>
<div class="item"><div>6</div></div>
<div class="item"><div>7</div></div>
<div class="item"><div>8</div></div>
<div class="item"><div>9</div></div>
<div class="item"><div>10</div></div>
</div>
또한,에 따라 세분화 플렉스 레이아웃 과 CSS 분열 , 인 flexbox을 사용하여 휴식을 강제 허용 break-before, break-after또는 CSS 2.1 별칭 :
.item:nth-child(3n) {
page-break-after: always; /* CSS 2.1 syntax */
break-after: always; /* New syntax */
}
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(3n) {
page-break-after: always;
background: silver;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
flexbox의 강제 줄 바꿈은 아직 널리 지원되지 않지만 Firefox에서는 작동합니다.
