1角溃，父級容器包含樣式
1,1：display：flex千劈；//彈性布局盒模型
1.2：flex-flow： row wrap;
flex-flow ：flex-direction排列方向 ? flex-wrap是否換行雕憔；這倆簡寫形式
<flex-direction>排列方向row | row-reverse | column | column-reverse;
row:主軸為水平方向，項目沿主軸從左至右排列司训；
column：主軸為豎直方向，項目沿主軸從上至下排列；
row-reverse：主軸水平，項目從右至左排列宝磨，與row反向；
column-reverse：主軸豎直盅安，項目從下至上排列唤锉，與column反向；
<flex-wrap> 是否換行;nowrap | wrap | wrap-reverse;
nowrap：自動縮小項目别瞭，不換行窿祥；
wrap：換行，且第一行在上方蝙寨；
wrap-reverse：換行晒衩，第一行在下面；
1.3：align-items：center籽慢；
y交叉軸上如何對齊浸遗；flex-start | flex-end | center | baseline | stretch
flex-start：頂端對齊;
flex-end：底部對齊;
center：豎直方向上居中對齊;
baseline：item第一行文字的底部對齊;
stretch：當(dāng)item未設(shè)置高度時，item將和容器等高對齊;
1.4：align-content：center箱亿；
多根軸線的對齊方式跛锌。如果項目只有一根軸線，該屬性不起作用，多根軸線定義了align-content后髓帽，align-items屬性將失效菠赚；flex-start | flex-end | center | space-between | space-around | stretch
lex-start：左對齊
flex-end：右對齊
center：居中對齊
space- between：兩端對齊
space-around：沿軸線均勻分布
stretch：各行將根據(jù)其flex-grow值伸展以充分占據(jù)剩余空間
2 子集屬性
2.1 ：flex;
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和郑藏。
flex-grow：定義了當(dāng)flex容器有多余空間時衡查，item是否放大。默認值為0必盖，即當(dāng)有多余空間時也不放大拌牲；
flex-shrink：定義了當(dāng)容器空間不足時，item是否縮小歌粥。默認值為1塌忽，表示當(dāng)空間不足時，item自動縮惺弧土居；
flex-basis：表示項目在主軸上占據(jù)的空間，默認值為auto嬉探；
2.1.1 ：flex：none;
flex：none =flex： 0 0 auto; 不放大也不縮小
2.1.2 ： flex：auto;
flex：auto =flex：1 1 auto 擦耀；
2.2：align-self：auto;
允許item有自己獨特的在交叉軸上的對齊方式
auto：和父元素align-self的值一致；
flex-start：頂端對齊涩堤；
flex-end：底部對齊眷蜓；
center：豎直方向上居中對齊；
baseline：item第一行文字的底部對齊定躏；
stretch：當(dāng)item未設(shè)置高度時账磺，item將和容器等高對齊；
3 移動端需要樣式
3.1 第一種是不需要根據(jù)容器寬度大小收縮痊远，標準展示樣式寬度垮抗，使用flex:none
3.2第二種，根據(jù)大小鋪滿容器寬度碧聪，使用flex:auto;
3.3根據(jù)移動端冒版，容器寬度設(shè)為100%，有時候經(jīng)常會出現(xiàn)一行展示幾個逞姿，顯示多行辞嗡，并不會鋪滿剩下容器，按以前會使用寬度百分比滞造，和float浮動來劃分使用续室，很少使用flex布局。
現(xiàn)在也可以通過寬度設(shè)置百分比谒养，來劃分挺狰，（因為發(fā)現(xiàn)寬度百分比，flex=1,flex=2設(shè)置并不能根據(jù)比例平分容器寬度）。
