如何用flexbox控制每行展示3条列表数据？
2018-11-20 本文已影响0人
羊羊羊0703
说明
1、移动端经常喜欢设计间隙固定，每行3个的布局，故写一个demo
宽度375效果图
另一个宽度效果图
代码
<style>
.box{
overflow: hidden;
}
ul{
width: calc(100% + 10px);
padding: 0;
display: flex;
flex-wrap: wrap;
}
li{
list-style: none;
background-color: #f00;
flex: 0 0 calc(33.33% - 10px);
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
