赵天韵,尚福林,屠岸无姜
常见的一个图文列表设计,通常是这样的,两端顶着容器,中间的间距平均分,如下图的某东商品列表的设计:
列表是这样自适应的,当视窗足够放多少个商品就放多少个,然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同,因此所看到的间距或者每一行的个数都会不同。
想到这种设计,我们学过flex就知道,非常像flex的justify-content: space-between的效果,因此我们自然这样实现:
.flex {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.demo1 > .flex__item {
flex-basis: 200px;
margin-top: 1rem;
text-align: center;
box-sizing: border-box;
}
.demo1 > .flex__item img {
width: 100%;
}
<ul class="flex demo1">
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
<li class="flex__item">
<img src="http://via.placeholder.com/100" />
<p>
图片
</p>
</li>
</ul>
demo:
我们看到效果,最后一行不正确,应该向左对齐才对。
我的方案放在这边了:
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论