css flex布局

1，父级容器包含样式

1,1：display：flex；//弹性布局盒模型

1.2：flex-flow： row wrap;

flex-flow ：flex-direction排列方向   flex-wrap是否换行；这俩简写形式

排列方向row | row-reverse | column | column-reverse;

row:主轴为水平方向，项目沿主轴从左至右排列；

column：主轴为竖直方向，项目沿主轴从上至下排列；

row-reverse：主轴水平，项目从右至左排列，与row反向；

column-reverse：主轴竖直，项目从下至上排列，与column反向；

是否换行;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设置并不能根据比例平分容器宽度）。