技術標籤：Csshtmlcssflex

今天有人問到下面這樣一個問題

他想要的效果：

而他做出來的效果是：

他這個是flex佈局，完了外層的盒子給了個 justify-content: space-between; 樣式，這樣大盒子裡每個小檢視塊就均分了，但是換行後假如每行只能排4個，如果下一行不夠4個，被兩端對齊。

給出我的做法：

1、基本思路是外層容器flex佈局，讓內部的每個小容器從左向右按順序排列（justify-content: flex-start;），並且允許換行（flex-start;flex-wrap: wrap;）；

2、內層容器為了佔滿每一行，每個小容器用寬度用 calc()計算寬度。

例如每行佈局4個，寬度寫法：width: calc((100% - 36px) / 4);

取外層寬度100%-內層4個小容器的中間3個間距，我這裡每個是12px，剩下的寬度就是每行分佈的所有容器佔據的總寬度，除以4就是每個寬度。

3、最後加個 :nth-of-type(4n+0){margin-right: 0;} ，作用是讓每間隔4個內部小容器中最後一個的右間距為0，避免佔用父容器的寬度。

css部分：

.content {width: 800px;margin: 50px auto;}
/*重點是下面幾行樣式*/
.outer-box {display: flex;justify-content: flex-start;
 
flex-wrap: wrap;}
.outer-box .inner-item {
　　width: calc((100% - 36px) / 4);
　　height: 120px;
　　margin-right: 12px;
　　margin-bottom: 14px;
　　background: #66d9b5;
}
.outer-box .inner-item:nth-of-type(4n+0){margin-right: 0;}

html部分：

<div class="content">
    <div class="outer-box"
 
>
        <div class="inner-item">
            <div>我是內容</div>
        </div>
        <div class="inner-item">
            <div>我是內容</div>
        </div>
        <div class="inner-item">
            <div>我是內容</div>
        </div>
        <div class="inner-item">
            <div>我是內容</div>
        </div>
        <div class="inner-item">
            <div>我是內容</div>
        </div>
        <div class="inner-item">
            <div>我是內容</div>
        </div>
    </div>
</div>

最終效果：