今天，本文會以盡量精簡的文本來介紹flexbox，**示例會比以往少很多，因為要全面講述，估計十篇文章都講不完……
flexbox，又叫彈性盒子布局。簡單來說，它是一種css快速布局方式，相比於傳統文件流布局方式，具有簡潔、高效和響應式等優點。
1、超簡潔語法
就說元素水平垂直居中布局這個經典難題吧！ 這個問題其實在我之前的純css七大居中方法這篇文章中已經總結過，其中最後兩個方法就是用的flexbox，尤其是最後乙個，就兩句**，相比於傳統布局，簡單到不好意思~~
父元素：display: flex;2、響應式布局子元素：margin: auto;
比如要將乙個盒子分成三等分，可以這樣寫：
ul
ul li
1、flexbox模型
大家在中學階段都學過直角座標系，它是由垂直的橫軸和縱軸構成，橫軸方向向右，縱軸方向向上。而今天所要講的flexbox與此極為相似，它也是由垂直的兩條軸構成，只不過一條叫做主軸，另一條叫做交叉軸（垂直與主軸），圖示如下：
flexbox模型（flex-direction: row）
預設情況下主軸就是橫軸，方向水平向右，交叉軸就是縱軸，方向豎直向下。具體用法，我們接著往下看。
2、flexbox眾多屬性的作用範圍
設定父容器的屬性有：
display: flex | inline-flex;設定子元素的屬性有：flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: || ;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
order: ;3、flexbox眾多屬性介紹flex-grow: ;
flex-shrink: ;
flex-basis: | | auto | content;
flex: none | ? || ;
align-self: auto | flex-start | flex-end | center | baseline | stretch;
① display (適用于父容器)
flex: 設定該元素為塊級元素inline-flex: 設定該元素為行內元素
該屬性可定義布局模式為flexbox布局，其中display: flex設定該元素為塊級元素，display: inline-flex設定該元素為行內元素，可以分別模擬傳統布局模式下的display: block與display: inline，只不過設定了display: flex | inline-flex的元素其子元素會按照flexbox的規則進行布局。如果要使用flexbox布局，則該屬性必寫。
② flex-direction (適用于父容器)
row(預設值)：主軸方向作為預設的書寫模式。即橫向從左到右排列（左對齊）。或許正是因為該屬性的存在，flexbox中的橫縱軸才會採用主軸和交叉軸這兩個名詞來描述，這樣才不容易造成其他屬性功能描述上的混亂。row-reverse：對齊方式與row相反。
column：交叉軸方向作為預設的書寫模式。即縱向從上往下排列（頂對齊）。
column-reverse：對齊方式與column相反。
③ flex-wrap (適用于父容器)
nowrap(預設值)：flex容器為單行。該情況下flex子項可能會溢位容器該屬性控制flex容器是單行或者多行，同時主軸的方向決定了新行堆疊的方向。wrap：flex容器為多行。該情況下flex子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse：反轉 wrap 排列。
④ flex-flow (適用于父容器)
：定義彈性盒子元素的排列方向。這個屬性就不用多講了，其實就是②和③兩個屬性的縮寫。：控制flex容器是單行或者多行。
⑤ justify-content (適用于父容器)
flex-start(預設值)：彈性盒子元素將向行起始位置對齊。⑥ align-items (適用于父容器)flex-end：彈性盒子元素將向行結束位置對齊。
center：彈性盒子元素將向行中間位置對齊。
space-between：彈性盒子元素會平均地分布在行裡。
space-around：彈性盒子元素會平均地分布在行裡，兩端保留子元素與子元素之間間距大小的一半。
flex-start：彈性盒子元素的交叉軸起始位置的邊界緊靠住該行的交叉軸起始邊界。⑦ align-content (適用于父容器)flex-end：彈性盒子元素的交叉軸起始位置的邊界緊靠住該行的交叉軸結束邊界。
center：彈性盒子元素在該行的交叉軸上居中放置。
baseline：彈性盒子元素根據它們的基線對齊。
stretch(預設值)：彈性盒子元素沿交叉軸方向拉伸填充整個伸縮容器。
flex-start：各行向彈性盒容器的起始位置堆疊。⑧ order (適用於子元素)flex-end：各行向彈性盒容器的結束位置堆疊。
center：各行向彈性盒容器的中間位置堆疊。
space-between：各行在彈性盒容器中平均分布。
space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
stretch(預設值)：各行將會伸展以占用剩餘的空間。
（預設值為0）：用整數值來定義排列順序，數值小的排在前面。可以為負值。設定或檢索彈性盒模型物件的子元素出現的順序。
⑨ flex-grow (適用於子元素)
（預設值為0）：用數值來定義擴充套件比率。不允許負值根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間。
⑩ flex-shrink (適用於子元素)
（預設值為1）：用數值來定義收縮比率。不允許負值根據彈性盒子元素所設定的收縮因子作為比率來收縮空間。
⑪ flex-basis (適用於子元素)
：用長度值來定義寬度。不允許負值如果所有子元素的基準值之和大於剩餘空間，則會根據每項設定的基準值，按比率伸縮剩餘空間：用百分比來定義寬度。不允許負值
auto(預設值)：無特定寬度值，取決於其它屬性值
content：基於內容自動計算寬度
⑫ flex (適用於子元素)
none：none關鍵字的計算值為: 0 0 auto設定或檢索彈性盒模型物件的子元素如何分配空間，是⑨⑩⑪三者的組合寫法。（預設值為1）：用來指定擴充套件比率
（預設值為1）：用來指定收縮比率
（預設值為0%）：用來指定伸縮基準值，即在根據伸縮比率計算出剩餘空間的分布之前，flex子項長度的起始數值。在flex屬性中該值如果被指定為auto，則伸縮基準值的計算值是自身的 設定，如果自身的寬度沒有定義，則長度取決於內容。
⑬ align-self (適用於子元素)
auto(預設值)：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。align-items是用於定義父容器中所有的子元素在交叉軸方向上的對齊方式，而align-self則是定義flex子項單獨在交叉軸方向上的對齊方式。flex-start：彈性盒子元素的交叉軸起始位置的邊界緊靠住該行的交叉軸起始邊界。
flex-end：彈性盒子元素的交叉軸起始位置的邊界緊靠住該行的交叉軸結束邊界。
center：彈性盒子元素在該行的交叉軸上居中放置。
baseline：彈性盒子元素根據它們的基線對齊。
stretch：彈性盒子元素沿交叉軸方向拉伸填充整個伸縮容器。
相容性：flexbox的相容性目前還是不容樂觀的，ie下相容到ie11，而且也只是相容一部分屬性。
結束語：flexbox在其發展歷程上也是一路坎坷，在目前最新版本之前還有兩個老版本，而本文就不做介紹了，由於flexbox的易用性，以及目前在移動端的相容性較為良好，相信其未來發展潛力還是相當大的。
Flexbox 快速布局神器
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。flexbox通常能讓我們更好的操作它的子元素布局 注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用flex布局的元...
flexbox布局 Flexbox 布局實際用例
上篇文章介紹了 flexbox 的屬性與示例，本文再通過幾個 flex 布局的案例來體會 flex 布局的特性帶來的便利和問題 當我們給父容器設定 flex 屬性後，flex 容器會在容器內建立乙個新的flex 格式化上下文 formatting context 在這上下文中float clear將...
CSS布局 Flexbox的理解與使用
display 這定義了乙個flex容器，內斂還是塊取決於給定的值。它為所有直接孩子元素提供了乙個flex上下文。display flex or inline flex 需要注意的是，css的列對於flex容器無效。flex direction 設立主軸，因此定義flex專案放置在flex容器裡的方...