200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > CSS 弹性布局/flex布局最后一行左对齐

CSS 弹性布局/flex布局最后一行左对齐

时间:2022-10-04 12:22:35

相关推荐

CSS 弹性布局/flex布局最后一行左对齐

设计案例:

左对齐前

左对齐后

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; /*伪元素的宽度与子元素的宽度一致*/}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。