如何在flex布局中换行? [英] How to break line in a flex layout?
本文介绍了如何在flex布局中换行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有第一,第二和第三项,然后无论空间有多宽,我都希望第四项转到下一行.
I have my first, second, and third items and then I want the forth item to go to the next line no matter how wide is the space.
.box {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
}
.it {
max-width: 420px;
}
<div class="box">
<div class="it">1</div>
<div class="it">2</div>
<div class="it">3</div>
<div class="it">4</div>
</div>
推荐答案
您可以在正确的位置插入一个宽的伪元素:
You can insert a wide pseudo-element at the right position:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container::after {
content: '';
width: 100%;
}
.flex-item:last-child { /* or `:nth-child(n + 4)` */
order: 1;
}
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
这篇关于如何在flex布局中换行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文