flex属性

1、盒模型、flex

先聊一下盒模型，之前盒模型分为标准盒模型和IE盒模型，现在又多了一个弹性盒模型。

标准盒模型：content-box，在这个模型下设置宽高就是设置内容区域是盒子的位置，当你加padding、border的话都是在盒子外层加的，会使盒子变大。

IE盒模型：border-box，在这个模型下设置宽高就是设置了border+padding+content的宽度，当设置了padding或者border的时候不会扩大盒子导致变形。 切换这两种模型的属性是box-sizing: border-box || content-box

弹性盒模型：flex布局，使盒子可以伸缩的一种模型，用法：display:flex;

2、弹性盒模型

任何一个元素都可以指定flex布局。设置flex布局之后，float clear和vertical-align属性将失效。

3、容器的排列属性

1.flex-direction：决定主轴的方向、即项目的排列方向。有四个值： row： 主轴为水平，起点在左端。 row-reverse: 主轴为水平。起点在右端。 column：主轴为垂直方向，起点在上端。 column-reverse： 主轴为垂直方向，起点在下端。

2、flex-wrap: 定义了如果一行放不下，是否换行，默认不换行，属性值有三个。 nowrap： 不换行，默认值 wrap： 换行，第一行在上面、 wrap-reverse： 换行，第一行在下面

3、flex-flow：是前两个属性的集合版。 flex-flow: flex-direction || flex-wrap；

4、容器的对齐属性

1. justify-content: 定义了项目在主轴(X轴)上的对齐方式。有五个值。 flex-start： 左对齐，默认值。 flex-end： 右对齐 conter : 居中 space-between: 两端对齐 space-around: 每个元素的左右空隙都平分剩余空间。

2. align-items: 定义项目在交叉轴(Y轴)上的对齐方式。有五个属性值。 flex-start： 顶端对齐。 flex-end： 底部对齐。 conter： 居中 baseline： 基线对齐 stretch: 默认值，如果项目没有设置高度或者auto就默认占满整个容器的高度。

3. align-content： 定义了如果有多根轴线的情况下的对齐方式，只有一根的话不生效，就是当设置了flex-wrap：wrap并且换行之后才生效。有6个值。 flex-start： 与交叉轴的起点对齐 flex-end： 与交叉轴的终点对齐 center： 居中 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch： 默认值、轴线占满整个交叉轴。

5、项目属性，就是设置在容器内的元素身上的属性。

1. order： 定义项目的排列顺序，值越小，排列越靠前，默认都是0.
2. flex-grow： 定义项目的放大比例，设置每一项的占比，默认为0，即存在剩余空间也不放大。如果所有的项目都设置为1的话就是有剩余空间的情况下，每一项平方剩余空间。如果有一项为2，代表该项是为1的二倍。
3. flex-shrink： 定义项目的收缩比例，默认为1，就是当空间不足的情况下，所有的都收缩，如果有某个设置为0的话，为0的不收缩。
4. flex-basis： 定义了在分配剩余空间前，项目占据的空间，浏览器根据这个属性计算是否有多余空间，默认值是auto，即项目原本的大小，也可以设置具体的数值。
5. flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
6. align-self：允许单个项目与其他项目对齐方式不一样，可以覆盖align-items属性，默认值为auto，即继承父级的align-items属性，如果没有父元素，则等同于stretch。