1. 塊級元素需設(shè)置以下屬性使其變成Flex容器 :
.box{
display: flex;
display: -webkit-flex; /* Webkit內(nèi)核的瀏覽器饮亏，必須加上-webkit前綴局扶。/
}
2. 行內(nèi)元素需設(shè)置以下屬性使其變成Flex容器世剖。
.box{
display: inline-flex;
display: -webkit-inline-flex; /* Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴窖认。/
}
注意,設(shè)為Flex布局以后,子元素的 float,clear和vertical-align屬性將失效劲藐。
3畦贸、設(shè)置在容器上的屬性
flex-direction 屬性決定主軸的方向（即項(xiàng)目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默認(rèn)值）：主軸為水平方向陨闹，起點(diǎn)在左端。
row-reverse：主軸為水平方向家制，起點(diǎn)在右端正林。
column：主軸為垂直方向，起點(diǎn)在上沿颤殴。
column-reverse：主軸為垂直方向觅廓，起點(diǎn)在下沿
flex-wrap 屬性決定是否換行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默認(rèn)）：不換行。
wrap：換行涵但，第一行在上方杈绸。
wrap-reverse：換行，第一行在下方矮瘟。
flex-flow屬性是 flex-direction屬性和 flex-wrap屬性的簡寫形式瞳脓，默認(rèn)值為row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content 屬性定義了項(xiàng)目在主軸上的對齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊澈侠，項(xiàng)目之間的間隔都相等
space-around：每個項(xiàng)目兩側(cè)的間隔相等
align-items 屬性定義項(xiàng)目在交叉軸上如何對齊
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：交叉軸的起點(diǎn)對齊劫侧。
flex-end：交叉軸的終點(diǎn)對齊。
center：交叉軸的中點(diǎn)對齊。
baseline: 項(xiàng)目的第一行文字的基線對齊烧栋。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto写妥，將占滿整個容器的高度。
align-content屬性定義了多根軸線的對齊方式审姓。如果項(xiàng)目只有一根軸線珍特，該屬性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：與交叉軸的起點(diǎn)對齊。
flex-end：與交叉軸的終點(diǎn)對齊魔吐。
center：與交叉軸的中點(diǎn)對齊扎筒。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布酬姆。
space-around：每根軸線兩側(cè)的間隔都相等嗜桌。所以，軸線之間的間隔比軸線與邊框的間隔大一倍辞色。
stretch（默認(rèn)值）：軸線占滿整個交叉軸症脂。
4、設(shè)置在內(nèi)層容器上的屬性
order的值是整數(shù)淫僻，默認(rèn)為0數(shù)值越小,排列越靠前，默認(rèn)為0
.item {
order: 0;
}
flex-grow屬性定義了當(dāng)flex容器有多余空間時item是否放大壶唤。默認(rèn)值為0雳灵，即當(dāng)有多余空間時也不放大,可能的值為整數(shù)，表示不同item的放大比例
.item1 {
flex-grow:1
}
.item2 {
flex-grow:2
}
.item3 {
flex-grow:2
}
即當(dāng)有多余空間時item1闸盔、item2悯辙、和item3以1：2:3的比例放大
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1迎吵，即如果空間不足躲撰，該項(xiàng)目將縮小
.item {
flex-basis: 0;
}
如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時击费，都將等比例縮小拢蛋。如果一個項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1蔫巩，則空間不足時谆棱，前者不縮小。
flex-basis表示項(xiàng)目在主軸上占據(jù)的空間圆仔，默認(rèn)值為auto
.item1 {
flex-basis: 80px
}
.item2 {
flex-basis: 160px
}
.item3 {
flex-basis: 240px
}
flex屬性是flex-grow垃瞧、flex-shrink和flex-basis三屬性的簡寫總和
align-self屬性允許item有自己獨(dú)特的在交叉軸上的對齊方式，它有六個可能的值坪郭。默認(rèn)值為auto
auto：和父元素align-self的值一致
flex-start：頂端對齊
flex-end：底部對齊
center：豎直方向上居中對齊
baseline：item第一行文字的底部對齊
stretch：當(dāng)item未設(shè)置高度時个从，item將和容器等高對齊
