flex布局设置一行显示多个,水平布局,自动换行
·
flex布局设置一行显示多个,水平布局,自动换行
场景:一行固定显示几个列表模块:水平布局,自动换行
效果图:
代码
html
<!-- 一行显示五条数据,多余的自动换行,从第二行再开始排列 -->
<div class="box">
<div class="list">列表1</div>
<div class="list">列表2</div>
<div class="list">列表3</div>
<div class="list">列表4</div>
<div class="list">列表5</div>
<div class="list">列表6</div>
<div class="list">列表7</div>
<div class="list">列表8</div>
</div>
css
.box {
/* 父盒子设置为伸缩盒子*/
display: flex;
/* wrap: 在必要的时候进行换行*/
flex-wrap: wrap;
/* flex-start: 默认从头开始排列*/
justify-content: flex-start;
border: 1px solid blue;
}
.list {
color: red;
/* 18%: 默认每一个列表占18%*/
flex: 0 0 18%;
height: 50px;
line-height: 50px;
background: orange;
text-align: center;
/* 右边距,默认使用css函数去计算 */
margin-right: calc(10% / 4);
margin-bottom: 20px;
}
/* 去除每行尾多余的边距 */
.list:nth-child(5n) {
margin-right: 0;
}
更多推荐
所有评论(0)