使用flex布局完美实现一行三个，显示多行，左对齐
AI 概述
经常会遇到这样的排列布局，要求实现一行三个，显示多行，左对齐，思考片刻决定使用 flex 布局。
最终效果图：
代码如下：
<body>
<section class="content">
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item"&g...
经常会遇到这样的排列布局，要求实现一行三个，显示多行，左对齐，思考片刻决定使用 flex 布局。
最终效果图：
代码如下：
<body>
<section class="content">
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
<div class="item">元素</div>
</section>
</body>
<style>
.content {
width: 100%;
display: flex;
flex-wrap: wrap;
background-color: skyblue;
}
.item {
flex: 0 0 calc((100% - 10px)/3);
height: 120px;
background-color: pink;
/* 间隙为 5px */
margin: 0 5px 5px 0;
}
.item:nth-child(3n) {
/* 去除第 3n 个的 margin-right */
margin-right: 0;
}
</style>
也可以：
.item {
/* flex: 0 0 calc((100% - 10px)/3); */
width: calc((100% - 10px) / 3);
height: 120px;
background-color: pink;
/* 间隙为 5px */
margin: 0 5px 5px 0;
}
至此使用 flex 布局完美解决一行三个，显示多行，左对齐的需求。
以上关于使用flex布局完美实现一行三个，显示多行，左对齐的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 使用flex布局完美实现一行三个，显示多行，左对齐
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 使用flex布局完美实现一行三个，显示多行，左对齐
