flex布局——回顧

flex 即為彈性布局。
　　任何一個容器都可以指定為flex布局。
　　　　.box{display:flex}
　　行內元素可以使用flex布局
　　　　.box{display: inline-flex}
　　webkit核心的瀏覽器必須加上-webkit 首碼。
　　　　.box{display:-webkit-flex; display:flex;}
　　注意：元素設定flex布局以後,子項目得float ,clear 和 vertical-align 屬性將失效。
　　基本概念：
　　　　採用flex布局的元素稱之為flex容器，它的所有子項目自動成為容器成員，稱為flex
　　　　項目。
　　　　容器預設存在兩根軸，水平的主軸（main axis） 和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start, 結束位置叫做 main end ；
　　　　　　交叉軸的開始位置叫做cross start,結束位置叫做 cross start,技術位置叫做 cross end.
　　單個項目佔據的主軸空間叫做 main size 佔據的交叉軸空間叫做cross size.

容器的屬性：
　　有6個屬性設定在容器上。
　　　　flex-direction 　　flex-wrap　　flex-flow　　justify-content
　　　　align-items　　align-content
　　　　　　1.flex-direction
　　　　　　　　屬性決定主軸的方向（即項目的排列方向）
　　　　　　　　　　.box{flex-direction:row | row-reverse | column | column-reverse;}
　　　　　　　　　　　　row(預設值)主軸為水平方向，起點在左端。
　　　　　　　　　　　　row-reverse: 主軸為水平方向，起點在右端。
　　　　　　　　　　　　column: 主軸為垂直方向，起點在上沿。
　　　　　　　　　　　　column-reverse: 主軸為垂直方向，起點在下沿。
　　　　　　2.flex-wrap 屬性
　　　　　　　　預設情況下，項目都排列在一條線（又稱軸線）上，flex-wrap 屬性定義，如果一條軸線
　　　　　　　　　　排列不下，如何換行。
　　　　　　　　　　　　.box{flex-wrap: nowrap | wrap | wrap-reverse;}
　　　　　　　　　　　　　　　　nowrap （預設）： 不換行。
　　　　　　　　　　　　　　　　wrap: 換行，第一行在上方。
　　　　　　　　　　　　　　　　wrap-reverse: 換行，第一行在下方。
　　　　　　3.flex-flow
　　　　　　　　flex-flow 屬性是flex-direction 屬性和flex-wrap 屬性的簡寫方式，預設值為row nowrap.
　　　　　　　　　　.box{ flex-flow:<flex-direction> || <flex-wrap>;}
　　　　　　4.justify-content 屬性
　　　　　　　　屬性定義了項目在主軸上的對齊。
　　　　　　　　　　.box{justify-content: flex-start | flex-end | center | space-between | space-around;}
　　　　　　　　　　　　　　5個值，具體對齊與軸的方向有關，下面假設主軸為從左至右。
　　　　　　　　　　　　　　　　　flex-start(預設值) : 靠左對齊
　　　　　　　　　　　　　　　　　flex-end 靠右對齊
　　　　　　　　　　　　　　　　　center 置中
　　　　　　　　　　　　　　　　　space-between: 左右對齊，項目之間的間隔都相等。
　　　　　　　　　　　　　　　　　space-around: 每個項目兩側的間距都相等，所以項目之間的間隔比項目與邊框的間隔大一倍。
　　　　　　5.align-items
　　　　　　　　屬性定義項目在交叉軸上如何對齊。
　　　　　　　　　　.box{align-items: flex-start | flex-end | center | baseline | stretch;}
　　　　　　　　　　　　可能取5個值，具體的對齊與交叉軸的方向有關，下面假設交叉軸上從上到下。
　　　　　　　　　　　　　　flex-start: 交叉軸的起點對齊。
　　　　　　　　　　　　　　flex-end: 交叉軸的終點對齊。
　　　　　　　　　　　　　　center: 交叉周的中點對齊。
　　　　　　　　　　　　　　baseline：項目的第一行文字的基準對齊。
　　　　　　　　　　　　　　stretch (預設值) 如果項目未設定高度或設定auto,將佔滿整個容器的高度。
　　　　　　6.align-content 屬性
　　　　　　　　屬性定義了多根軸線的對齊，如果項目只能有一根軸線，該屬性不起作用。
　　　　　　　　　　.box{align-content: flex-start | flex-end | center | space-between | space-around |
　　　　　　　　　　stretch;}
　　　　　　　　　　　　屬性可取6個值。
　　　　　　　　　　　　　　flex-start: 與交叉軸的起點對齊。
　　　　　　　　　　　　　　flex-end: 與交叉軸的終點對齊。
　　　　　　　　　　　　　　center: 與交叉軸的中點對齊。
　　　　　　　　　　　　　　space-between；與交叉軸左右對齊，軸線之間的間隔平均分布。
　　　　　　　　　　　　　　space-around: 每根軸線兩側的間隔都相等。
　　　　　　　　　　　　　　stretch(預設值)：軸線佔滿整個交叉軸。

　　項目的屬性
　　　　可以設定6個屬性在項目上。
　　　　　　orderflex-growflex-shrinkflex-basisflexalign-self

　　　　　　　　1.order屬性
　　　　　　　　　　order 屬性定義項目的排列順序，數值最小，排列越靠前，預設為o.
　　　　　　　　　　　　.item { order: <integer>;}
　　　　　　　　2.flex-grow 屬性
　　　　　　　　　　flex-grow 屬性定義項目的放大比例，預設為0,即如果存在剩餘空間，也放大。
　　　　　　　　　　　　.item { flex-grow: <number>;}
　　　　　　　　　　　　如果所有項目的flex-grow 屬相都為1，它們將登封剩餘空間，如果一個項目的
　　　　　　　　　　　　　　flex-grow 屬性為2, 其他項目都為1 則前者佔據的剩餘空間將比其他項目多一倍。

　　　　　　　　3.flex-shrink 屬性
　　　　　　　　　　flex-shrink 屬性定義項目的縮小比例，預設為1,即空間不足，該項目將縮小。
　　　　　　　　　　　　.item{flex-shrink:<number>;}
　　　　　　　　　　　　　　如果所有的項目flex-shrink 屬性都為1 ，當空間不足時，都將等比例縮小。
　　　　　　　　　　　　　　如果一個項目的flex-shrink屬性為o,其他項目都為1，則空間不足時，前者
　　　　　　　　　　　　　　　　不縮小。負值對該屬性無效。
　　　　　　　　4.flex-basis 屬性
　　　　　　　　　　　　屬性定義了在分配多餘空間之前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算
　　　　　　　　　　　　主軸是否有多餘空間。它的預設值為 auto,即項目的本來大小。
　　　　　　　　　　.item {flex-basis: <length> | auto;}
　　　　　　　　　　　　他可以設為跟width 或 height 屬性一些樣的值，則項目將佔據固定空間。
　　　　　　　　5.flex 屬性
　　　　　　　　　　flex 屬性是flex-grow. flex-shrink 和 flex 和 flex-basis 的簡寫，預設值
　　　　　　　　　　為 0 1 auto. 後兩個屬性可選。
　　　　　　　　　　　　.item { flex:none | [<'flex-grow'> <'flex-shrink'> ? || <'flex-basis'>]}
　　　　　　　　　　　　　　該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
　　　　　　　　　　　　　　　　建議優先使用這個屬性，而不是單獨寫三個分離的屬性，
　　　　　　　　　　　　因為瀏覽器會推算相關值
　　　　　　　　6.align-self 屬性
　　　　　　　　　　　　align-self 屬性允許單個項目有與其它項目不一樣的對齊，可以
　　　　　　　　　　　　　　覆蓋align 屬性，預設值為auto, 表示繼承父元素的align-items屬性
　　　　　　　　　　　　　　如果沒有父元素，則等於stretch.
　　　　　　　　　　　　　　.item{align-self: auto | flex-start | flex-end | center | baseline | stretch;}
　　　　　　　　　　該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

更多flex布局——回顧相關文章請關注topic.alibabacloud.com！

