设计案例:
左对齐前
左对齐后
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; /*伪元素的宽度与子元素的宽度一致*/}}