更佳閱讀體驗：zclzone.gitee.io/zhangsheng
Flex 屬性詳述
1. flex-direction
決定主軸的方向,即元素排列的方向村象，有四種方式:
row: 主軸為水平方向，元素沿主軸從左至右排列
column: 主軸為豎直方向，元素沿主軸從上至下排列
row-reverse: 主軸水平敛滋，元素從右至左排列朦乏，與 row 反向
column-reverse: 主軸豎直虱岂，元素從下至上排列屯伞，與 column 反向
2. flex-wrap
默認(rèn)情況下违帆，item 排列在一條線上饲化，即主軸上先舷，flex-wrap 決定當(dāng)排列不下時是否換行以及換行的方式，有三種方式|wrap|wrap-reverse
nowrap: 自動縮小項目滓侍，不換行
wrap: 換行,第一行在上方
wrap-reverse: 換行蒋川，第一行在下方
3. flex-flow
flex-direction 和 flex-wrap 的簡寫形式
如：row wrap 、 column wrap-reverse 等撩笆。默認(rèn)值為 row nowrap捺球，即橫向排列 不換行。
4. justify-content
決定元素在主軸上的對齊方式夕冲，當(dāng)主軸沿水平方向時,有五種方式：
flex-start(默認(rèn)): 左對齊
flex-end: 右對齊
center: 居中對齊
space-between: 兩端對齊
space-around: 沿軸線均勻分布
5. align-items
決定元素在交叉軸上的對齊方式氮兵，當(dāng)主軸沿水平方向時，有五種方式：
flex-start: 頂端對齊
flex-end: 底部對齊
center: 豎直方向上居中對齊
baseline: 元素第一行文字的底部對齊
stretch: 當(dāng)元素未設(shè)置高度時歹鱼，元素將和容器等高對齊
6. align-content
該屬性定義了當(dāng)有多根主軸時泣栈，即 item 不止一行時，多行在交叉軸軸上的對齊方式弥姻。注意當(dāng)有多行時南片，定義了 align-content 后，align-items 屬性將失效庭敦。align-content 可能值含義如下（假設(shè)主軸為水平方向）：
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
stretch：各行將根據(jù)其 flex-grow 值伸展以充分占據(jù)剩余空間
flex item 屬性詳述
1. order
der 的值是整數(shù)疼进，默認(rèn)為 0，整數(shù)越小秧廉，item 排列越靠前
<div class="wrap">
<div class="div" style="order:4"><h2>item 1</h2></div>
<div class="div" style="order:2"><h2>item 2</h2></div>
<div class="div" style="order:3"><h2>item 3</h2></div>
<div class="div" style="order:1"><h2>item 4</h2></div>
</div>
2. flex-grow
定義了當(dāng) flex 容器有多余空間時伞广，item 是否放大。默認(rèn)值為 0疼电，即當(dāng)有多余空間時也不放大嚼锄；可能的值為整數(shù)，表示不同 item 的放大比例蔽豺，如
<div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>
即當(dāng)有多余空間時item1区丑、item2、和item3以1：2:3的比例放大茫虽。
3. flex-shrink
定義了當(dāng)容器空間不足時刊苍，item 是否縮小既们。默認(rèn)值為 1，表示當(dāng)空間不足時正什，item 自動縮小啥纸，其可能的值為整數(shù)，表示不同 item 的縮小比例婴氮。
4. flex-basis
項目在主軸上占據(jù)的空間斯棒，默認(rèn)值為 auto。如下代碼
<div class="wrap">
<div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
<div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
<div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>
5. flex
flex 屬性是 flex-grow主经、flex-shrink 和 flex-basis 三屬性的簡寫總和.
6. align-self
align-self 屬性允許 item 有自己獨特的在交叉軸上的對齊方式荣暮，它有六個可能的值。默認(rèn)值為 auto
auto：和父元素 align-self 的值一致
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item 第一行文字的底部對齊
stretch：當(dāng) item 未設(shè)置高度時罩驻，item 將和容器等高對齊
怕什么真理無窮穗酥，進一寸有進一寸的的驚喜~
