flex佈局－回顧

flex 即為彈性佈局。
　　任何一個容器都可以指定為flex佈局。
　　　　.box{display:flex}
　　行內元素可以使用flex版面
　　　　.box{display: inline-flex}
　　webkit核心的瀏覽器必須加上-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-　　　　　　　　屬性決定主軸的方向（即專案的排列方向）
　　　　　　　　　　.box{flex-direction:row | -reverse | column | column-reverse;}
　　　　　　　　　　　　row(預設值)主軸為水平方向，起點在左端。
　　　　　　　　　　　　row-reverse: 主軸為水平方向，起點在右端。
　　　　　　　　　　　　column: 主軸為垂直方向，起點在上沿。
　　　　　　　　　　　　column-reverse: 主軸為垂直方向，起點在下沿。
　　　　　　2.flex-wrap 屬性
　　　　　　　　預設情況下，項目都排列在一條線（又稱軸線　　排列不下，如何換行。
　　　　　　　　　　　　.box{flex-wrap: nowrap | wrap | wrap-reverse;}
　　　　　　　　　　　　　　　　　　　　　　　H換行。
　　　　　　　　　　　　　　　　wrap: 換行，第一行在上方。
　　　　　　　　　　　　　　　　wrap-reverse: 換行，第一行在下方。
　　　　　　3.flex-flow
　　　　　　　　flex-flow 屬性是flex-direction 屬性和flex-wrap 屬性的簡寫方式，預設值為　.box{ flex-flow: || ;}
　　　　　　4.justify-content 屬性
　　　　　　　　屬性定義了專案在主軸上的對齊方式。
　　　　　　　　　　.box{justify-content: flex-start | flex-end | center | space-between | space-around;方式與軸的方向有關，以下假設主軸為從左到右。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　flex-end 右對齊
　　　　　　　　　　　　　　　　　　　　　　　　　　　　center 居中　　　　　　 -er ween: 兩端對齊，項目之間的間隔都相等。
　　　　　　　　　　　　　　　　　space-around: 每個專案兩側的間距都相等，所以專案之間的間隔比專案與邊框的間隔大一倍。
　　　　　　5.align-items 
　　　　　　　　屬性定義專案在交叉軸上如何對齊。
　　　　　　　　　　.box{align-items: flex-start | flex-end | center | baseline | stretch;}
　　　　　　　　　　聚下面假設交叉軸上從上到下。
　　　　　　　　　　　　　　flex-start: 交叉軸的起點對齊。
　　　　　　　　　　　　　　flex-end: 交叉軸的終點對齊。
　　　　　　　　　　　　　　center: 交叉週的中點對齊。
　　　　　　　　　　　　　　baseline：項目的第一行文字的基線對齊。
　　　　　　　　　　　　　　stretch (預設值) 如果項目未設定高度或設定auto,將佔滿整個容器的高度。
　　　　　　6.align-content 屬性
　　　　　　　　屬性定義了多根軸線的對齊方式，如果項目只能有一條軸線，該屬性不起作用。
　　　　　　　　　　.box{align-content: flex-start | flex-end | center | space-between | space-around『　　　　　　　　屬性可為6個值。
　　　　　　　　　　　　　　flex-start: 與交叉軸的起點對齊。
　　　　　　　　　　　　　　flex-end: 與交叉軸的終點對齊。
　　　　　　　　　　　　　　center: 與交叉軸的中點對齊。
　　　　　　　　　　　　　　space-between；與交叉軸兩端對齊，軸線之間的間隔平均分佈。
　　　　　　　　　　　　　　space-around: 每根軸線兩側的間隔都相等。
　　　　　　　　　　　　　　stretch(預設值)：軸線佔滿整個交叉軸。

　　項目的屬性
　　　　可以設定6個屬性在項目上。
　　　　　　order flex-grow flex-shrink flex-basis flex align-self

　　　　　　　　1.order屬性
　　　　　　　　　　order　瀦　　　　　.item { order: ;}
　　　　　　　　2.flex-grow 屬性
　　　　　　　　　　　　　　　　項目的放大比例，預設為0,即如果存在剩餘空間，也放大。
　　　　　　　　　　　　.item { flex-grow: ;}
　　　　〴 
　　　　　　　　　　　　　　flex-grow 屬性為2, 其他項目皆為1則前者佔據的剩餘空間將比其他項目多一倍。

　　　　　　　　3.flex-shrink 屬性

　　　　　　　　　　flex-shrink 屬性定義　　　　　　flex-shrink 屬性定義項目的縮小比例，此項目縮小1,　　　　flex-shrink 屬性定義項目的縮小比例，該項目將縮小到項目的比例縮小。
　　　　　　　　　　　　.item{flex-shrink:;}
　　　　　將等比例縮小。
　　　　　　　　　　　　　　如果一個項目的flex-shrink屬性為o,其他項目都為1，則空間不足時，前者　　　　　　　　　　　　　　　　　　　不縮小。負值對該屬性無效。
　　　　　　　　4.flex-basis 屬性
　　　　　　　　　　　　〔　　　　　　　　〜餘空間定義了在分配這個空間之前，根據計算的主空間　　　　　　主軸是否有多餘空間。它的預設值為 auto,即項目的本來大小。
　　　　　　　　　　.item {flex-basis: | auto;}
　　　　　　　 則固定　 　　　　　　　　
　　　　　　　　5.flex 屬性
　　　　　　　　　　flex 屬性是flex-grow　-shrink 和　　　　flex 屬性是flex-grow　，　　　為 0 1 auto. 後兩個屬性可選。
　　　　　　　　　　　　.item { flex:none | [ ? || ]}
　　　　　　　　　　　　　　該屬性有兩個快捷值：auto (1 1 auto)和none (0 0 auto)。
　　　　　　　　　　　　　　　　建議優先使用這個屬性，而不是單獨寫三個分離的屬性，🀜　　　　　》　　　　、　　、　　、　　、　　、　　、、　　、　　、、　、、　、 H、　　、　　、　　、、 H　　、、　、　、　、、、 H　　　、、）　　　　　　　　6.align-self 屬性
　　　　　　　　　　　　align-self 屬性允許單一項目具有與其它，項目不對齊的方式可
　　　　　　覆寫align 屬性，預設值為auto, 表示繼承父元素的align-ite　　　等於stretch.
　　　　　　　　　　　　　　.item{align-self: auto | flex-start | flex-end | center | baseline | stretch;}
　　　　　　　　　　此屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

更多flex版面－回顧相關文章請關注PHP中文網！