前言

flex布局是前端常用的布局方式之一，但在使用過程中，我們總是感覺不太方便，因?yàn)槿粘ｉ_發(fā)中，大多數(shù)時(shí)候，我們想要的效果是這樣的

即左右兩端對(duì)齊并頂滿，小盒子左右間距一致，并且從左至右排布。
今天主要就來討論，通過css，有幾種方式來實(shí)現(xiàn)，以及它們的優(yōu)缺點(diǎn)。

方式一 nth-child

<template><div class="main"><div class="flex-box"><div class="item-box">...</div>...</div>	</div>
</template>

.flex-box {display: flex; // 設(shè)置成為flex模式flex-wrap: wrap; // 允許換行
}.item-box {width: 22%; // 以4個(gè)一行為例，有4個(gè)子盒子，3個(gè)間距margin-right: 4%; // 3 * 4 + 4 * 22 = 100margin-bottom: 20px; // 行與行之間也要設(shè)置邊距。
}// 如果一行是5個(gè)就是 5 + 5n
.item-box:nth-child(4 + 4n) {// 當(dāng)n為0時(shí)，即表示第一行最后一個(gè)元素，不需要右外邊距，否則就超出 100%了。margin-right: 0 !important;
}

優(yōu)點(diǎn)：實(shí)現(xiàn)了我們想要的布局方案，代碼量也并不復(fù)雜，基本沒有兼容性的問題。

缺點(diǎn)1：當(dāng)遇到下面這種情況時(shí)，該設(shè)置將會(huì)失效。

<template><div class="main"><div class="flex-box"><div class="item-box">...</div><div class="item-box" style="display:none;"></div></div>	</div>
</template>

這是因?yàn)閚th-child是按照子盒子的個(gè)數(shù)來設(shè)置的，雖然其中一部分子盒子消失了，但它的元素依然存在，個(gè)數(shù)并沒有變。

缺點(diǎn)2: 不夠靈活，如果在不同屏幕分辨率下，每行個(gè)數(shù)不一樣(做響應(yīng)式的時(shí)候經(jīng)常會(huì)遇見這種情況)，需要在不同分辨率下，多寫一套樣式代碼。

 @media screen and (max-width: 991px) {.flex-box {display: flex; // 設(shè)置成為flex模式flex-wrap: wrap; // 允許換行}.item-box {width: 48%; // 以2個(gè)一行為例，有2個(gè)子盒子，1個(gè)間距margin-right: 4%; // 1 * 4 + 2 * 48 = 100margin-bottom: 20px; // 行與行之間也要設(shè)置邊距。}// 如果一行是2個(gè)就是 2 + 2n.item-box:nth-child(2 + 2n) {// 當(dāng)n為0時(shí)，即表示第一行最后一個(gè)元素，不需要右外邊距，否則就超出 100%了。margin-right: 0 !important;}}

方式二 gap屬性

.flex-box {display: flex; // 設(shè)置成為flex模式flex-wrap: wrap; // 允許換行gap: 4%; // 設(shè)置間距為4%
}.item-box {width: 22%; // 以4個(gè)一行為例，有4個(gè)子盒子，3個(gè)間距 margin-bottom: 20px; // 行與行之間也要設(shè)置邊距。
}

優(yōu)點(diǎn)： 顯而易見，這種方式的代碼量更少，更方便，并且不存在方式一的缺點(diǎn)1，即display:none;不會(huì)造成影響。

缺點(diǎn)1：gap目前還是一個(gè)很新的屬性，對(duì)瀏覽器的兼容性并不高，尤其是不兼容ie11，如果項(xiàng)目對(duì)瀏覽器沒有兼容性要求，可以使用gap，當(dāng)然也可以換一種布局方式，display:grid;

缺點(diǎn)2：當(dāng)然這種方式也需要對(duì)不同分辨率的設(shè)配，額外多寫一套代碼，但相對(duì)來說，也輕松許多。

方式三 設(shè)置margin左右兩邊為負(fù)值

.flex-box {display: flex; // 設(shè)置成為flex模式flex-wrap: wrap; // 允許換行margin: 0 -2% 0 -2% // 間距為4%
}.item-box {width: 21%; // 以4個(gè)一行為例，有4個(gè)子盒子，4個(gè)間距 4 * 21 + 4 * 4 = 100  margin: 0 2% 20px 2%; // 左右兩邊各2%，所以間距為4%
}

優(yōu)點(diǎn)：兼容性很好，能夠兼容ie11，并且不存在display：none;時(shí)的問題。
缺點(diǎn)1：代碼略微有些復(fù)雜，需要合理安排盒子寬度和間距的寬度，與前面的兩種方式不同間距數(shù)量和盒子數(shù)量一致。需要分別設(shè)置左邊距和右邊距。

缺點(diǎn)2：需要對(duì)不同分辨率的設(shè)配，額外多寫一套代碼。

總結(jié)

三種方式中，第二種方式最簡(jiǎn)單，但兼容性有限；第一種方式代碼量不少，兼容性適中，而且display:none；的問題嚴(yán)重，最后一種方式，最推薦，雖然有一些計(jì)算，并且也要合理分配寬度，但其兼容性最好，基本沒啥場(chǎng)景不能適用，正所謂一招鮮，吃遍天。

至于缺點(diǎn)2，面對(duì)不同分辨率，每行數(shù)量會(huì)變化的問題，目前沒有特別好的解決方案，都需要額外一套樣式代碼才能解決。

當(dāng)然，你可以通過使用scss或者less，弄一個(gè)for循環(huán)，從一行2個(gè)到 10個(gè) 進(jìn)行樣式的封裝，這樣使用的時(shí)候，直接使用類名即可，比如 flex-row-6，flex-row-4等。

@for $i from 2 through 10 {.flex-row-#{$i} {display: flex;flex-wrap: wrap;.item {width: calc(96% / #{$i}) !important;margin-right: calc(4% / #{$i - 1}) !important;margin-bottom: 20px;}.item:nth-child(#{$i}n + #{$i}) {margin-right: 0 !important;}}
}