flex布局四个一行自动换行，flex布局换行

最新推荐文章于 2024-07-28 22:02:05 发布

郭冀鑫(๑*◡*๑)

最新推荐文章于 2024-07-28 22:02:05 发布

阅读量1.6k

点赞数 1

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/guojixin12/article/details/131716314

版权

这段代码展示了如何使用CSSFlexbox创建一个左对齐并允许元素换行的布局。.fromBox设置了宽度为80%，使用flex-start实现元素靠左对齐，flex-wrap属性设置为wrap允许元素换行。.form-item-project定义了元素间的边距和计算后的宽度，以确保一行内均匀分布。

摘要由CSDN通过智能技术生成

直接贴代码了

.fromBox{
  width: 80%;
  display: flex;
  justify-content: flex-start; // 靠左对齐
  flex-wrap: wrap; // 换行
}
.form-item-project{
  margin-right: 20px; // 增加边距
  width: calc((100% - 20px) / 5); // 这个是公式，减去边距以后一行放多少个。
}