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：当item未设置高度时，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：各行将根据其flex-grow值伸展以充分占据剩余空间
2 子集属性
2.1 ：flex;
flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。
flex-grow：定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；
flex-shrink：定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小；
flex-basis：表示项目在主轴上占据的空间，默认值为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：当item未设置高度时，item将和容器等高对齐；
3 移动端需要样式
3.1 第一种是不需要根据容器宽度大小收缩，标准展示样式宽度，使用flex:none
3.2第二种，根据大小铺满容器宽度，使用flex:auto;
3.3根据移动端，容器宽度设为100%，有时候经常会出现一行展示几个，显示多行，并不会铺满剩下容器，按以前会使用宽度百分比，和float浮动来划分使用，很少使用flex布局。
现在也可以通过宽度设置百分比，来划分，（因为发现宽度百分比，flex=1,flex=2设置并不能根据比例平分容器宽度）。
