如何在flex布局中打断线条？

作者

我有我的第一、第二和第三项，然后我希望第四项进入下一行，无论空间有多宽

.box{
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
调整项目：灵活启动；
}
.它{
最大宽度：420px；
}
&lt；div class=“box”&gt；
&lt；div class=“it”&gt；1&lt/部门&gt；
&lt；div class=“it”&gt；2&lt/部门&gt；
&lt；div class=“it”&gt；3&lt/部门&gt；
&lt；div class=“it”&gt；4&lt/部门&gt；
&lt/部门&gt

可以在正确的位置插入宽伪元素：

.flex容器{
显示器：flex；
柔性包装：包装；
}
.flex容器：：之后{
内容：''；
宽度：100%；
}
.flex项：最后一个子项{/*或`:n子项（n+4）`*/
顺序：1；
}
&lt；div class=“柔性容器”&gt；
&lt；div class=“弹性项目”&gt；1&lt/部门&gt；
&lt；div class=“弹性项目”&gt；2&lt/部门&gt；
&lt；div class=“弹性项目”&gt；3&lt/部门&gt；
&lt；div class=“弹性项目”&gt；4&lt/部门&gt；
&lt/部门&gt

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with