前段時間手工紀錄了一些flexbox的要點～如圖～
所以想把它整理成電子版，加上更詳盡的解析和說明，便于大家和自己日后學習理解和查閱～
Flexbox 是CSS3 的盒子模型 ( box model )，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什么最近這個屬性才紅起來呢？最主要也是因為CSS3 的規范終于普及 ( 或 IE 終于沒落 )，加上移動設備的發展促成了響應式布局興起，自適應長寬、彈性相當大的 Flexbox 就趁勢而起了～
我們已經熟悉的網格布局（Grid），已經可以實現響應式布局，但仍需要相當大的代碼量來使其適應不同的屏幕。而Flexbox能夠更加靈活、簡潔、優雅、彈性的實現響應式的布局。
第一步要來看看 Flexbox 的盒子模型，根據W3C 文章所描述，flex 的盒子模型如下圖所呈現，與一般的盒子模型不同的地方，在于 Flexbox 的盒子模型具有水平的起點終點 ( main start、main end )，垂直的起點終點 ( cross start、cross end )，水平軸與垂直軸 ( main axis、cross axis )，然后元素具有水平尺寸與垂直尺寸 ( main
size、cross size )，這些都是相當重要的布局規劃。
再來我們先看看 Flexbox 有哪些屬性，也可參考 W3C css3 flexbox css3-flexbox：
display
flex-direction
justify-content
align-items
align-self
align-content
flex-wrap
order
flex
display
display 是我們熟悉的 CSS 屬性，對于 Flexbox 來說，有兩種方式可以設定，默認為「flex」，其布局方式與 block 類似，會強迫換行，但設為 display: flex
的子元素卻具備了更多彈性的設定，另外一種方式則是「inline-flex」，和 inline-block 類似，后方的元素不會換行。( e.g. css-flexbox-demo1.html )
CSS：
.flex,
.inline-flex{
width:100px;
height:50px;
border:1px
solid #000;
}
.flex{
display:flex;
}
.inline-flex{
display:inline-flex;
}
-
flex-direction
flex-direction 表示 Flexbox 內容元素的「排列方向」，分別有下列四種( e.g. css-flexbox-demo2.html ) - row：默認值，由左到右，從上到下
- row-reverse：與 row 相反
- column：從上到下，再由左到右
- column-reverse：與column 相反
CSS：
.flex-row{ flex-direction:row; } .flex-row-reverse{ flex-direction:row-reverse; } .flex-column{ flex-direction:column; } .flex-column-reverse{ flex-direction:column-reverse; }
-
justify-content
justify-content 決定了內容元素與整個 Flexbox 的「水平對齊」位置，回想一下最上面講的 Flexbox 盒子模型，具有 main start 和 main end 左右兩個端點，justify-content 就是按照這個方式來設置，而其中的設定值共有下列五個。( e.g. css-flexbox-demo3.html、W3C 說明 ) - flex-start：默認值，對齊最左邊的 main start
- flex-end：對齊最左邊的 main end
- center：水平居中
- space-between：平均分配內容元素，左右元素將會與 main - start 和 main end 對齊
- space-around：平均分配內容元素，間距也是平均分配
CSS：
.flex-start{
justify-content:flex-start;
}
.flex-end{
justify-content:flex-end;
}
.center{
justify-content:center;
}
.space-between{
justify-content:space-between;
}
.space-around{
justify-content:space-around;
}
-
align-items
align-items 剛好和 justify-content 相反，align-items 決定了內容元素與整個 Flexbox 的「垂直對齊」位置，再回想一下最上面講的 Flexbox 盒子模型，具有 cross start 與 cross end 左右兩個端點，align-items 與 align-self 就是按照這個方式做設定，設定值總共有下列五個。( e.g. css-flexbox-demo4.html、W3C 說明 ) - flex-start：默認值，對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直居中
- stretch：將內容元素全部撐開至 Flexbox 的高度
- baseline：以所有內容元素的基線作為對齊標準
CSS：
.flex-start{
align-items:flex-start;
}
.flex-end{
align-items:flex-end;
}
.center{
align-items:center;
}
.stretch{
align-items:stretch;
}
.baseline{
align-items:baseline;
}
.flex-item{
width:60px;
text-align:center;
}
.item1{
font-size:20px;
line-height: 60px;
background:#c00;
}
.item2{
line-height: 30px;
background:#095;
}
.item3{
font-size:30px;
line-height: 100px;
background:#059;
}
-
align-self
align-self 的設定與align-items 相同，但目的不同，align-self 的作用在于重寫已經套用 align-items 的屬性，如果照我們以前所寫，因為 align-items 是針對子元素，所以必須要用 align-self 來進行重寫，我們直接用上一個例子來修改就很清楚了。( e.g. css-flexbox-demo5.html、W3C 說明 )
CSS：
.item2{
align-self:baseline;
line-height: 30px;
background: #095;
}
-
align-content
剛剛談到的 align-items 是針對內容為單行的元素進行處理，如果遇到多行的元素，就要使用 align-content 這個屬性，這個屬性總共有六個設定值。( e.g. css-flexbox-demo6.html、W3C 說明 ) - flex-start：默認值，對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直居中
- space-between：將第一行與最后一行分別對齊最上方與最下方
- space-around：每行平均分配間距
- stretch：內容元素全部撐開
CSS：
.flex-start,
.flex-end,
.center,
.space-between,
.space-around,
.stretch{
display:inline-flex;
flex-wrap:wrap;
width:180px;
height:160px;
margin:5px 5px 40px;
border:1px solid #000;
vertical-align: top;
}
.flex-start{
align-content:flex-start;
}
.flex-end{
align-content:flex-end;
}
.center{
align-content:center;
}
.space-between{
align-content:space-between;
}
.space-around{
align-content:space-around;
}
.stretch{
align-content:stretch;
}
.align-content>div{
padding:15px;
margin:2px;
background:#666;
}
-
flex-wrap
在剛剛的例子看到一個 flex-wrap 的屬性，這個屬性負責的是讓內容的元素換行，因為當我們把父元素的 display 設定為 flex 或 inline-flex 的時候，子元素就是以單行的方式，彈性撐滿父元素，所以就要利用 flex-wrap 來換行，共有三個設定值。( e.g. css-flexbox-demo7.html) - nowrap：默認值，單行
- wrap：多行
- wrap-reverse：多行，但內容元素反轉
CSS：
.nowrap,
.wrap,
.wrap-reverse{
display:inline-flex;
flex-wrap:wrap;
width:180px;
height:80px;
margin:5px 5px 40px;
border:1px solid #000;
vertical-align: top;
}
.column{
flex-direction:column;
width:120px;
height:180px;
}
.nowrap{
flex-wrap:nowrap;
}
.wrap{
flex-wrap:wrap;
}
.wrap-reverse{
flex-wrap:wrap-reverse;
}
.align-content div{
width:30px;
height:30px;
margin:5px;
background:#069;
}
.column div{
background:#f50;
}
-
order
剛剛在 flex-wrap 的屬性里頭看到了可以把元素反轉，order 這個屬性更是可以直接指定一個數字，就可以由小到大的排列順序。( e.g. css-flexbox-demo8.html)
.item{
width:50px;
height:60px;
text-align: center;
line-height: 50px;
}
.order1{
order:1;
background:#c00;
}
.order2{
order:2;
background:#069;
}
.order3{
order:3;
background:#095;
}
.order4{
order:4;
background:#f50;
}
.order5{
order:5;
background:#777; }
.order6{
order:6;
background:#077;
}
-
flex
壓軸的來了，flex 應該是 Flexbox 最重要的屬性了，而 flex 其實是由三個屬性組合而成，依照先后順序分別是「flex-grow」、「flex-shrink」和「flex-basis」，如果 flex 只填了一個數值 ( 無單位 )，那么默認就是以 flex-grow 的方式呈現，至于三個屬性的解釋如下： - flex-grow：數字，無單位，當子元素的 flex-basis 長度「小」于它自己在父元素分配到的長度，按照數字做相對應的「伸展」比例分配，默認值為 1，設為 0 的話不會進行彈性變化，不可為負值。
- flex-shrink：數字，無單位，當子元素的 flex-basis 長度「大」于它自己在父元素分配到的長度，按照數字做相對應的「壓縮」比例分配，默認值為 1，設為 0 的話不會進行彈性變化，不可為負值。
-
flex-basis：子元素的基本大小，作為父元素的大小比較基準，默認值為 0，也因為默認值為 0，所以沒有設定此屬性的時候，會以直接才用 flex-grow 屬性，flex-basis 也可以設為
auto，如果設為 auto，就表示子元素以自己的基本大小為單位。
三個屬性可以分開設定，也可以合在一起用一個 flex 統一設定，下面的例子展現出同一個 Flexbox，在不同的寬度，子元素會有不同大小的呈現。( e.g. css-flexbox-demo9.html)
HTML：
<div cl ass="flex flex-300">
<div class="item item1">1</div>
<div class="item item2">2</div>
</div>
<div class="flex flex-150">
<div class="item item1">1</div>
<div class="item item2">2</div>
</div>
CSS：
.flex{
display:inline-flex;
height:60px;
margin:5px 5px 40px;
border:1px solid #000;
vertical-align: top;
}
.flex-300{
width:300px;
}
.flex-150{
width:80px;
}
.item{
height:60px;
text-align: center;
line-height: 50px;
}
.item1{
flex:1 2 200px;
background:#c00;
}
.item2{
flex:2 1 100px;
background:#069;
}
如果用動畫來表現，可以看出拉長的時候紅色會變得比藍色長，但壓縮的時候卻是藍色變得比紅色長，如此一來就更能體會 flex 在響應式設計里的關鍵角色啦！
雖然很多老的瀏覽器還無法完全完美兼容，但我們還是應該學習這種優雅前端的方式，相信不久的將來，春天就會來的～
