說到佈局，再不用框架裏的格柵系統的前提下，我用了好多年css + div佈局方法，float , position，@media響應式，table方法，可以說挺熟練了，能應對平時的各種佈局需求。直到最近偶然看到一篇flex的佈局方法，我才知道自己out了，也終於明白爲什麼兩年前一次面試問我佈局用什麼，我回答div,float,position這些，面試官不滿意的原因了。這裏也不具體介紹這些方法了，網上教程很多，也很容易想。
1 關於Flex和Grid的綜述
Flexbox 是一維佈局系統，適合做局部佈局，比如導航欄組件。Grid 是二維佈局系統，通常用於整個頁面的規劃。二者從應用場景來說並不衝突。雖然 Flexbox 也可以用於大的頁面佈局，但是沒有 Grid 強大和靈活。二者結合使用更加輕鬆[1]。
w3c官方關於flexbox[2]的文檔看起來挺複雜的，學起來並不容易，從第一版2009年出現，到本文書寫時已有10年，最新版本的規範是2018年11月出的，標準制定方包括Google、Mozilla和Microsoft，因此會被很好地支持，目前IE11之前版本和android4.2之前版本不支持，新的系統瀏覽器均可以支持，2018版的最新版標準google和firefox支持最好。
W3C的標準非常多，要在上面找標準文檔很簡單，在w3c.org上找個輸入框鍵入關鍵詞就能搜到，如果你跟我一樣英語不好，你就能學半天英語了。
grid已經出了level2，level2沒有瀏覽器測試，level1的測試表明被支持的還不夠好，因此我覺得如果擔心目標用戶的瀏覽器不支持grid就不用，可以flex一維佈局系統嵌套使用，達到差不多的效果。
另外，從caniuse.com查到flexbox level 1和grid level1的可用情況[4-5]，grid已經可以可以適用於90%以上的瀏覽器[5]，用不用自己斟酌吧。
2 Flex使用方法
2.1 能幹什麼（讓我們帶着問題往後面看）
- can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
- 可以實現按照任何方向浮動（從左往右，從右往左，從上往下，從下往上）。
- can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
- 可以讓視覺順序獨立於HTML/XML文檔中標籤順序。
- can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
- 可以按照主軸方向(1中定義的浮動方向，不一定從左往右)單個方向線性佈局，也可以換行成多行後沿着交叉軸佈局。
- can “flex” their sizes to respond to the available space
- 可以縮放尺寸來適應可用空間。
- can be aligned with respect to their container or each other on the secondary (cross)
- 在交叉軸方向對齊上，容器裏的元素可以參照容器來對其，也可以參照彼此來對其。
- can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size
- 可以動態的沿着交叉軸換行，也可以不換行以保障容器交叉抽的尺寸。
2.2 怎麼幹
2.2.1. 指定浮動方向(指定主軸方向)：
flex-direction:
- row(默認) 水平，起點在左端
- row-reverse 水平，起點在右端
- column:垂直，起點在上沿
- column-reverse:垂直，起點在下沿
例如：
.container{
display:flex; /* 使元素成爲flex容器，也可用 inline-flex，區別在於一個容器在文檔流裏是塊級元素，一個是行內元素*/
flex-direction: row; /* 沿水平方向從左往右排列*/
}
2.2.2 讓視覺順序獨立於HTML/XML文檔中標籤順序
爲元素指定order值即可，這個功能我還沒認識到其重要性，簡單易理解，見官方文檔。
<!DOCTYPE html>
<header>...</header>
<main>
<article>...</article>
<nav>...</nav>
<aside>...</aside>
</main>
<footer>...</footer>
main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav { order: 1; width: 200px; }
main > aside { order: 3; width: 200px; }
2.2.3 沿着主軸或交叉軸排列
justify-content: 主軸上對齊方式
align-items: 交叉軸上的對齊方式
align-content: 換行後有多行的情況
這三個值的取值看圖更容易理解
- justify-content值域爲：(再也不用絞盡腦汁調margin了，而且很強大，因爲主軸不侷限於從左往右)
![在這裏插入圖片描述]()
- align-items值域爲：
![在這裏插入圖片描述]()
- align-content的值域爲:
![在這裏插入圖片描述]()
如下面實現上下水平居中對齊，感覺很舒適，"position + margin"方法再見了您吶
<div class="container">
<div class="box"></div>
</div>
<style>
.container{
display:flex;
align-items:center;
justify-content:center;
}
.box{
width:200px;
height:200px;
background:#ff0;
}
</style>
不用javaScript實現了瀑布流佈局：
剛開始的時候，我們做瀑布流，是通過Multi-columns列的概念來實現的，或是通過JavaScript來實現，現在有了flex，那麼就可以通過flex進行實現瀑布流的佈局，實現的方式其實相當的簡單，在一個大的flex容器中放幾個塊，通過水平排列不換行的方式實現，接着分別在塊中添加元素，元素的排列屬於垂直排列[6]。
就個人而言不推薦使用這種方式進行佈局，因爲到後來進行前後端交互的時候，將數據分開放在不同的板塊進行遍歷是相當困難的，還是需要通過JavaScript的幫助，不過在靜態頁面中還是不錯的佈局方式[6]。
2.2.4 縮放自適應
這篇文章總結的不錯，強烈推薦https://www.html.cn/archives/7212 （看到人家總結的那麼好，筆者瞬間不打算寫了[捂臉]）
2.2.5 在交叉軸上的對齊
設置2.2.3中的align-items屬性即可，想起請看2.2.3的圖示。
2.2.6
flex-grow 設置子元素的拉伸https://www.html.cn/archives/7236
flex-shrink 正好和 flex-grow 相反，它是決定矩形子元素允許收縮多少的。
3 Grid的用法
https://www.html.cn/archives/8506
參考文章
[1] 愚人碼頭. [EB/OL]. [2017-12-05]. https://www.zhihu.com/question/28691822.
[2] w3c.org. [S].https://www.w3.org/TR/css-flexbox-1/.
[3] w3c.org. [S].https://www.w3.org/TR/css-grid-2/.
[4] caniuse.com.[EB/OL].https://caniuse.com/#feat=flexbox.
[5] caniuse.com.[EB/OL].https://caniuse.com/#search=grid.
[6] 北海ぉ情書.[EB/OL].https://blog.csdn.net/Hunt_bo/article/details/89044482