我們在實際的業務中，經常會做比如下面的情況

三列，如果我們不用彈性布局 用傳統的布局來解決的話，浮動，然后就是設置元素的外邊距，但是不管你怎么設置總會差點意思，不是這邊多了就那邊有換行很難受。

這個時候 我們會選擇彈性布局，會讓我們比較舒服點吧
然后兩側對齊

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%;
        }

哎。經驗就是慢慢積累來的 加油吧 少年

關注我 持續更新前端知識。