设计案例:
左对齐前
左对齐后
html:
<h1 class="module-title">核心产品</h1>
<ul class="core-top">
<li v-for:'xxx'>
<img :src="xxx" alt="" />
<div class="content">
<h3>xxx</h3>
<p>xxx</p>
</div>
</li>
</ul>
实现flex布局最后一行左对齐的其中的一种方法样式:
ul.core-top {
margin: 0 20px;
height: 636px;
// background-color: skyblue;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 48px 0 20px;
li {
width: 353px;
height: 102px;
margin-bottom: 40px;
// background-color: pink;
}
// 若最后一行列表元素不足每行最大元素个数,则让所有元素左对齐
&::after {
content: '';
width: 353px; /*伪元素的宽度与子元素的宽度一致*/
}
}