css-flex佈局知識梳理
一.傳統的佈局
佈局的傳統解決方案，基於盒裝模型，依賴 CSS/display" target="_blank" rel="nofollow,noindex"> display 屬性 + position 屬性 + float 屬性。它對於那些特殊佈局非常不方便，比如， 垂直居中 就不容易實現。
二. Flex的相容性寫法
.flex {
display: -webkit-box;
display: -webkit-flex; /*safair*/
display: -ms-flexbox;
display: flex;
display: -moz-box;/* 老版本火狐語法 */
}
注意，設為 Flex 佈局以後，子元素的 float 、 clear 和 vertical-align 屬性將失效。
三. 原理
採用Flex佈局的稱其為“容器”，它的所有子元素稱為 “專案”。容器預設存在兩根軸，從數學角度，我稱其分別為：x軸和y軸。Flex佈局基本以這兩根軸為準。
四. 容器的屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
4.1 flex-direaction屬性
flex-direction屬性決定專案的排列方向,
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
4.2 flex-wrap屬性
預設情況下，專案都排在一條線（又稱"軸線"）上。 flex-wrap 屬性定義，如果一條軸線排不下，如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap: 預設不換行；
wrap ：換行，第一行在上方。
wrap-reverse: 換行，第一行在下方。
4.3 flex-flow屬性
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，預設值為 row nowrap 。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
4.4 justify-content屬性
justify-content屬性定義了專案在X軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start flex-end center space-between space-around
4.5 align-item 屬性
align-items 屬性定義專案在Y軸上如何對齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
4.6 align-content屬性
align-content 屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
五.專案的屬性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
5.1 order屬性
order 屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item {
order: <integer>;
}
5.2 flex-grow屬性
flex-grow 屬性定義專案的放大比例，預設為 0 ，即如果存在剩餘空間，也不放大。
如果所有專案的 flex-grow 屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的 flex-grow 屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
.item {
flex-grow: <number>; /* default 0 */
}
5.3 flex-shrink屬性
flex-shrink 屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
如果所有專案的 flex-shrink 屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的 flex-shrink 屬性為0，其他專案都為1，則空間不足時，前者不縮小。
5.4 flex-basis屬性
flex-basis 屬性定義了在分配多餘空間之前，專案佔據的X軸空間（main size）。瀏覽器根據這個屬性，計算X軸是否有多餘空間。它的預設值為 auto ，即專案的本來大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
5.5 flex屬性
flex 屬性是 flex-grow , flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto 。後兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值： auto ( 1 1 auto ) 和 none ( 0 0 auto )。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
5.6 align-self屬性
align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。預設值為 auto ，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch 。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
參考資料： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html