设置弹性布局的三列两侧对齐，最后一行样式的处理

我们在实际的业务中，经常会做比如下面的情况

三列，如果我们不用弹性布局 用传统的布局来解决的话，浮动，然后就是设置元素的外边距，但是不管你怎么设置总会差点意思，不是这边多了就那边有换行很难受。

这个时候 我们会选择弹性布局，会让我们比较舒服点吧
然后两侧对齐

div{
	display: flex;
	justify-content: space-between;
}

但这个会有一个问题就是 最后一行不足三个的时候 ， 会搞一个左右两侧各一个， 这个让我们很头疼

.parent {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .child {
            height: 100px;
            background-color: #f00;
            flex-basis: 30%;
            margin-bottom: 20px;
        }

<div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div style="width: 30%"></div>
    </div>

解决方法这推荐两个。

1. 在后面添加一个空的元素

        <div style="width: 30%"></div>

但是这个是可能感觉有点无中生有的感觉，看着也怪怪的

2. 使用伪类生成器

 .parent::after {
            display: 'block';
            content: "";
            width: 30%;
        }

哎。经验就是慢慢积累来的 加油吧 少年

关注我 持续更新前端知识。