css布局：弹性盒子

弹性盒子（父元素为容器，子元素为项目）：

块级弹性盒子
.box{
	display:flex;
}

行级弹性盒子（相当于行内块）
.box{
    display:inline-flex;
}

注意事项：

1、弹性容器外及弹性子元素内是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内布局。

2、当父元素设置为弹性盒子（flex）之后，子元素（项目）的float、clear、vertical-align会失效，父元素（容器）的column失效。

容器属性：

1、flex-direction属性：决定主轴方向（即项目排列方式） 

.box{
    display:flex;
    flex-direction:row/row-reverse/column/column-reverse;
}

（1）row（默认值）：主轴为水平方向，起点在左端。

（2）row-reverse：主轴为水平方向，起点在右边。

（3）column：主轴为垂直方向，起点在上方。

（4）column-reverse：主轴为垂直方向，起点在下方。

 2、justify-content属性（定义项目在主轴上的对齐方式）

.box{
    display:flex;
    justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly;
}

（1）flex-start（默认值）：左对齐。

（2）flex-end：右对齐。

（3）center：居中

（4）space-between：两端对齐，项目之间的间隔都相等。

（5）space-around：每个项目两侧的间隔都相等，项目之间的间隔比项目与边框的间隔大一倍。

（6）space-evenly：剩余空间平均分配，每个项目之间的距离都一样。

3、align-items属性：（定义项目在交叉轴上的对齐方式）

.box{
    display:flex;
    align-items:flex-start/flex-end/center/baseline/stretch;
}

（1）flex-start：交叉轴的起点对齐。

（2）flex-end：交叉轴的终点对齐。

（3）center：交叉轴的中点对齐。

（4）baseline：项目第一行文字的基线对齐。

（5）stretch（默认值）：如果项目未设置高度或者设为auto，将占满整个容器的高度。

 4、flex-wrap属性：（定义弹性盒子换行方式，弹性盒子默认不换行）

.box{
    flex-wrap:nowrap/wrap/wrap-reverse;
}

（1）nowrap（默认）：不换行

（2）wrap：换行，第一行在上方

（3）wrap-reverse：换行，第一行在下方

 项目属性

1、flex-shrink属性 ：定义盒子的缩小比例，默认值为1

当项目的宽度小于容器的宽度时，会自动缩小；

如果不需要某个项目缩小，给项目单独设置为0

2、flex-grow属性：定义盒子的放大比例，默认值为0

前提：当盒子有剩余空间时有效

当项目在容器中有剩余空间的时候，项目默认不放大；

如果需要项目占满容器的剩余空间，设置值为1

3、flex-basis属性：默认值为0

判断容器的剩余空间，有剩余空间的时候，使用放大属性；

没有剩余空间的时候，使用缩小属性

flex：1；根据剩余空间自动变化适应盒子大小

4、order属性：定义项目的排列顺序。

数值越小，排列越靠前，默认值为0

注意：与层级属性z-index类似，但是z-index是数值越大，层级越高。

5、align-self属性：定义弹性容器内被选中项目的对齐方式

和弹性容器的align-items属性作用相同，此属性用于项目

（1）auto：默认值。元素继承了他的父元素align-items属性。如果没有父元素则为“stretch”

（2）stretch：占满整个容器的高度

（3）center：交叉轴的中点对齐

（4）flex-start：交叉轴的起点对齐

（5）flex-end：交叉轴的终点对齐

（6）baseline：项目第一行文字基线对齐

（7）inherit：从父元素继承该属性