lex自問(wèn)世以來(lái)，受到各界的歡迎，因?yàn)椴徽摱嗝磸?fù)雜的布局，只要支持flex的瀏覽器，都能很容易的實(shí)現(xiàn)，而且更加通俗易懂。這里我收集了幾個(gè)很優(yōu)秀的布局方案

Flex基礎(chǔ)知識(shí)點(diǎn)復(fù)習(xí)和鞏固

CSS 三欄布局技巧匯總：七種方法行走天下

什么？CSS選擇器是從右往左解析

CSS十五種方法教你如何居中一個(gè)元素

骰子的布局

下面，就來(lái)看看Flex如何實(shí)現(xiàn)，從1個(gè)點(diǎn)到9個(gè)點(diǎn)的布局。這個(gè)例子可以一步步帶大家熟悉flex的基本知識(shí)點(diǎn)，可以清楚看到每個(gè)屬性的作用。這是我為啥把這個(gè)案例放在第一個(gè)的原因

如果不加說(shuō)明，本節(jié)的HTML模板一律如下。

<div class="box">
 <span class="item"></span>
</div>

上面代碼中，div元素（代表骰子的一個(gè)面）是Flex容器，span元素（代表一個(gè)點(diǎn)）是Flex子項(xiàng)。如果有多個(gè)子項(xiàng)，就要添加多個(gè)span元素，以此類推。

首先，只有左上角1個(gè)點(diǎn)的情況。Flex布局默認(rèn)就是首行左對(duì)齊，所以一行代碼就夠了。

.box {
 display: flex;
}

設(shè)置項(xiàng)目的對(duì)齊方式，就能實(shí)現(xiàn)居中對(duì)齊和右對(duì)齊。

.box {
 display: flex;
 justify-content: center;
}

.box {
 display: flex;
 justify-content: flex-end;
}

設(shè)置交叉軸對(duì)齊方式（垂直方向），可以垂直移動(dòng)主軸。

.box {
 display: flex;
 align-items: center;
}

.box {
 display: flex;
 justify-content: center;
 align-items: center;
}

.box {
 display: flex;
 justify-content: center;
 align-items: flex-end;
}

.box {
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
}

如果再增加一個(gè)點(diǎn)，可以完成下面的幾種排列布局

.box {
 display: flex;
 justify-content: space-between;
}

.box {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.box {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
}

.box {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-end;
}

.box {
 display: flex;
}
.item:nth-child(2) {
 align-self: center;
}

.box {
 display: flex;
 justify-content: space-between;
}
.item:nth-child(2) {
 align-self: flex-end;
}

如果是三個(gè)點(diǎn)呢

.box {
 display: flex;
}
.item:nth-child(2) {
 align-self: center;
}
.item:nth-child(3) {
 align-self: flex-end;
}

那么四個(gè)點(diǎn)是不是也無(wú)所謂了

.box {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-content: space-between;
}

如果想看到四個(gè)點(diǎn)在四個(gè)角，需要修改下html布局

<div class="box">
 <div class="column">
 <span class="item"></span>
 <span class="item"></span>
 </div>
 <div class="column">
 <span class="item"></span>
 <span class="item"></span>
 </div>
</div>
.box {
 display: flex;
 flex-wrap: wrap;
 align-content: space-between;
}
.column {
 flex-basis: 100%;
 display: flex;
 justify-content: space-between;
}

實(shí)現(xiàn)5個(gè)點(diǎn)的布局

<div class="column">
 <span class="item"></span>
 <span class="item"></span>
</div>
<div class="column">
 <span class="item"></span>
</div>
<div class="column">
 <span class="item"></span>
 <span class="item"></span>
</div>
.box {
 display: flex;
 justify-content: space-between;
}
.column {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.column:nth-of-type(2) {
 justify-content: center;
}

接下來(lái)是6個(gè)點(diǎn)

.box {
 display: flex;
 flex-wrap: wrap;
 align-content: space-between;
}

或者是垂直方向

.box {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 align-content: space-between;
}

相信這一波過(guò)去，大家對(duì)玩色子很感興趣了吧，想迫不及待實(shí)現(xiàn)一個(gè)色子全家桶吧，奔跑吧，皮卡丘！

接下來(lái)是一個(gè)更加激動(dòng)人心的時(shí)刻

更棒，更簡(jiǎn)潔的柵格系統(tǒng)

現(xiàn)今大部分柵格系統(tǒng)都使用了兩種布局方式中的一種：浮動(dòng) (float) 或者 內(nèi)聯(lián)塊 (inline-block)。但是它們的初衷均不是真的用于布局 (layout)，也因此導(dǎo)致了諸多的問(wèn)題和限制。

使用浮動(dòng) (float) 需要清除浮動(dòng)，因此牽連出了一堆布局問(wèn)題，最臭名昭著的是清除一個(gè)元素的浮動(dòng)有時(shí)會(huì)強(qiáng)制它出現(xiàn)在一個(gè)不相關(guān)的頁(yè)面部分的下邊 (例如 Bootstrap issue )。并且，使用清除浮動(dòng)通常會(huì)同時(shí)使用 before 和 after 兩個(gè)偽元素，導(dǎo)致你不能將該偽元素使用于其他用途。

內(nèi)聯(lián)塊布局最著名的問(wèn)題是 內(nèi)聯(lián)塊之間空白問(wèn)題, 以及其所有 解決方案 都是 奇技淫巧 和 惱人 的。

Flexbox 布局不僅結(jié)局了這些問(wèn)題，還開(kāi)啟全新可能性的新世界的大門(mén)。

具體請(qǐng)參考 https://magic-akari.github.io/solved-by-flexbox/demos/grids/

圣杯布局

圣杯布局 是典型的 CSS 布局問(wèn)題，有著眾多的解決方案。如果你不熟悉圣杯布局的歷史，這篇文章 能夠提供很好的總結(jié)，并給出了幾個(gè)眾所周知的解決方案。

圣杯布局由頁(yè)頭 (header)，中間部分 (center)，頁(yè)腳 (footer)，和三欄組成。中間的一欄是主要內(nèi)容，左邊和右邊提供如廣告、導(dǎo)航的鏈接。

具體可以參考 https://magic-akari.github.io/solved-by-flexbox/demos/holy-grail/

輸入附加組件

因?yàn)檩斎虢M件 CSS 的工作方式，幾乎不可能在一個(gè)元素之前或之后附加另一個(gè)元素，并讓它寬度自適應(yīng)地占滿剩余空間。

當(dāng)前僅有的方法，要么知道輸入組件的寬度，要么使用 display:table-cell ，后者有著自己的問(wèn)題，尤其是絕對(duì)定位在跨瀏覽器時(shí)遭遇的困難。

有了 Flexbox 布局，所有的問(wèn)題都煙消云散，并且代碼也極其簡(jiǎn)單。此外，輸入欄和輸入附加組件默認(rèn)同高。

<!-- appending -->
<div class="InputAddOn">
 <input class="InputAddOn-field" />
 <button class="InputAddOn-item">…</button>
</div>
<!-- prepending -->
<div class="InputAddOn">
 <span class="InputAddOn-item">…</span>
 <input class="InputAddOn-field" />
</div>
<!-- both -->
<div class="InputAddOn">
 <span class="InputAddOn-item">…</span>
 <input class="InputAddOn-field" />
 <button class="InputAddOn-item">…</button>
</div>
.InputAddOn {
 display: flex;
}
.InputAddOn-field {
 flex: 1;
 /* field styles */
}
.InputAddOn-item {
 /* item styles */
}

媒體對(duì)象

媒體對(duì)象 是面向?qū)ο?CSS 的典型代表 (OOCSS). 它的簡(jiǎn)單實(shí)用讓很多 CSS 開(kāi)發(fā)者(包括我自己)轉(zhuǎn)向了 OOCSS 開(kāi)發(fā)方法。

但是像眾多 CSS 布局技巧一樣，媒體對(duì)象必須求助于各種奇技淫巧來(lái)達(dá)成目標(biāo)。

媒體對(duì)象的正文不能出現(xiàn)在頭像的下邊，通過(guò)創(chuàng)建一個(gè) 塊格式化上下文(block formatting context) 或者使用一個(gè)與圖片等寬的左外邊距(margin)/內(nèi)邊距(padding) 。媒體對(duì)象必須清除 body 的浮動(dòng)，通過(guò)指定 overflow:hidden或使用偽元素來(lái)達(dá)成。

有了 Flexbox 布局，一切都解決了。附帶著，F(xiàn)Lexbox 布局還允許我們?cè)O(shè)置任意設(shè)置頭像的垂直對(duì)齊方式。我們可以輕松地把頭像移到右邊而不用改一行源代碼。

更復(fù)雜的嵌套模式

<div class="Media">
 <img class="Media-figure" src="" alt="" />
 <p class="Media-body">…</p>
</div>

CSS 代碼

.Media {
 display: flex;
 align-items: flex-start;
}
.Media-figure {
 margin-right: 1em;
}
.Media-body {
 flex: 1;
}

粘性頁(yè)腳

當(dāng)頁(yè)面內(nèi)容稀少時(shí)，讓頁(yè)腳粘在頁(yè)面底部，是每一個(gè) Web 開(kāi)發(fā)者在他的生涯中嘗試解決過(guò)的問(wèn)題。并且，可以說(shuō)絕大多數(shù)情況，這是一個(gè)已被解決的問(wèn)題。然而 現(xiàn)存的解決方案 有一個(gè)重大的缺陷 — 如果高度未知，就會(huì)失效。

Flexbox 布局可以完美解決這類問(wèn)題。眾所周知， Flexbox 布局經(jīng)常被用在水平布局中，然而在垂直布局中 Flexbox 布局也格外拿手。你所要做的就是把垂直部分包在 flex 容器中，并選擇一個(gè)元素可以讓它展開(kāi)以高度自適應(yīng)。它們會(huì)自動(dòng)地利用容器所有可用空間。

 <body class="Site">
 <header>…</header>
 <main class="Site-content">…</main>
 <footer>…</footer>
</body>

CSS 代碼

.Site {
 display: flex;
 min-height: 100vh; /*這里也很重要*/
 flex-direction: column;
}
.Site-content {
 flex: 1;
}

垂直居中

一直以來(lái)缺乏好的垂直居中的方法，是 CSS 的黑點(diǎn)。了解更多，可以查看 CSS十五種方法教你如何居中一個(gè)元素

更糟糕的是，目前的垂直居中的技術(shù)晦澀而又反直覺(jué)，最直接的選擇(比如 vertical-align:middle) 從未起過(guò)作用。

目前的垂直解決方案 使用了 從負(fù)外邊距 到 display:table-cell 等荒謬的奇技淫巧，包括全高的偽元素。這些技術(shù)有時(shí)候能夠生效，然而并不是所有情況都能如愿。如果你想垂直居中一個(gè)形狀不確定，或者子元素不是父元素唯一的子元素呢？如果你能用偽元素居中這種奇技淫巧，但是你又想用偽元素做些其他的事呢？

用了 Flexbox 布局，不再糾結(jié)這些麻煩。你可以任意對(duì)齊(垂直或者水平)，僅僅設(shè)置align-items, align-self, 和 justify-content 這些屬性就好。

鏈接文章

https://magic-akari.github.io/solved-by-flexbox/

https://davidwalsh.name/flexbox-dice

https://codepen.io/LandonSchropp/pen/KpzzGo

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html