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; } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/10744.html