1.flex-direction
決定主軸的方向，即項目排列的方向究驴，有四個可能的值：row(默認(rèn))|row-reverse|column|column-reverse
? ?????????????row:主軸為水平方向镊绪，項目沿主軸從左至右排列
column：主軸為豎直方向，項目沿主軸從上至下排列
row-reverse：主軸水平洒忧，項目從右至左排列蝴韭，與row反向
column-reverse：主軸豎直，項目從下至上排列熙侍，與column反向
2榄鉴、flex-wrap
默認(rèn)情況下，item排列在一條線上蛉抓，即主軸上牢硅，flex-wrap決定當(dāng)排列不下時是否換行以及換行的方式，可能的值nowrap(默認(rèn))|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
決定item在主軸上的對齊方式，可能的值有flex-start（默認(rèn)）擦剑，flex-end妖胀，center，space-between惠勒，space-around赚抡。當(dāng)主軸沿水平方向時，具體含義為
flex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
效果如下圖
5纠屋、align-items
決定了item在交叉軸上的對齊方式涂臣，可能的值有flex-start|flex-end|center|baseline|stretch，當(dāng)主軸水平時售担，其具體含義為
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當(dāng)item未設(shè)置高度時赁遗，item將和容器等高對齊
效果圖如下：
?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屬性詳述
item的屬性在item的style中設(shè)置献丑。item共有如下六種屬性
1、order
order的值是整數(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的縮小比例。flex-grow
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將和容器等高對齊
