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中文網！
