有没有办法在多行flexbox中进行换行?
例如,在此CodePen中的每个第三项之后中断。
.container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-child(3n) { 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>
喜欢
.item:nth-child(3n){ /* line-break: after; */ }
最简单,最可靠的解决方案是在适当的位置插入弹性项目。如果它们足够宽(width: 100%),则会强制换行。
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>
但这是丑陋的,不是语义上的。相反,我们可以在flex容器内生成伪元素,然后使用order它们将它们移到正确的位置。
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>
但是有一个局限性:flex容器只能有::before和::after伪元素。这意味着您只能强制2个换行符。
::before
::after
为了解决这个问题,您可以在flex项目内部而不是在flex容器中生成伪元素。这样,您将不会被限制为2。但是那些伪元素不会是flex项目,因此它们将无法强制换行。
但幸运的是,引入了CSS Display L3display: contents(当前仅受Firefox 37支持):
display: contents
元素本身不会生成任何框,但是其子元素和伪元素仍会正常生成框。出于框生成和布局的目的,必须将元素视为在文档树中已被其子元素和伪元素替换。
因此,您可以将其应用于display: contentsflex容器的子容器,并将每个容器的内容包装在其他包装器中。然后,弹性项目将是那些额外的包装和子项的伪元素。
.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>
另外,根据碎片的Flex布局和CSS碎片,Flexbox,就允许通过使用强制休息break- before,break-after或它们的CSS 2.1别名:
break- before
break-after
.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上使用。