弹性盒子布局

CSS中传统的布局方式是，基于盒子模型，依赖display属性+position属性+float属性。但对于特殊的布局非常不方便，比如，垂直居中。因此引入弹性盒子flex的布局。

一.flex布局中6个设置在容器上的属性：

1，flex-direction属性决定项目排列方向。（值：row(默认),row-reverse,column,column-reverse）

2,flex-wrap属性定义项目在一条线上排不下时该怎么换行。（值：nowrap(默认)，wrap,wrap-reverse,）

3,flex-flow是flex-direction和flex-wrap的简写方式。默认值：row wrap。

4，justify-content属性定义了项目在主轴(水平轴)上的对齐方式（值：flex-start，flex-end,center,space-between,space-around）

5,align-items属性定义了项目在交叉轴（竖直轴）上的对齐方式（值：flex-start，flex-end，center，stretch,baseline）

6,align-content属性定义了多行项目的对齐方式（值：flex-start，flex-end，center，stretch，space-between，space-around）

除了flex-flow简写属性外，有5个独立意义的属性。

二.flex布局中6个设置在项目上的属性：

1，order属性定义项目的排列顺序。数值越小，排列越靠前，默认值为0；

2，flex-grow属性定义了项目的放大比例.(默认值为0,即如果存在剩余空间，也不放大。属性为1则等分剩余空间）

3，flex-shrink属性定义了项目的缩小比例。（默认值为1，即如果空间不足，该项目将缩小。）

4，flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto。

5，flex属性是flex-grow，flex-shrink，flex-basis属性的简写，默认值：0,1，auto。

6，align-self属性规定该项目与其它项目不同的对齐方式；值：auto；flex-start;flex-end;center;baseline;stretch;

注意:1，flex布局的默认模式中因为flex-grow为1而flex-shrink为0则当项目的总宽度小于盒子宽度时，即使存在剩余空间，也不会放大；但当项目总宽度大于盒子总宽度时，项目宽度会自动缩小。

　　 2，注意在flex-grow和flex-shrink在设置值后，项目在缩小或扩大宽度后的实际宽度是多少。

 

转载于:https://www.cnblogs.com/webl/p/6592087.html