16css弹性布局

弹性布局

1. 他是css3推出的布局方式
2. 低版本浏览器不支持
3. 所有移动端都支持

设置弹性容器（弹性盒子）

1. 块 -> 弹性容器

   display:flex;

2. 行 -> 弹性容器

   display:inline-flex;

   一般行不会设置为弹性容器

设置弹性布局，只需要给父容器设置 display:flex;

一、flex-direction 设置主轴方向

1. row: 默认值，主轴为水平方向，起点在左边
2. row-reverse: 主轴为水平方向，起点在右边
3. column: 主轴为垂直方向，起点在上面
4. column-reverse: 主轴为垂直方向，起点在下面

二、flex-wrap: 设置子元素是否换行

1. nowrap：默认值，不换行，子元素可能会被压缩
2. warp：换行，行的起点在上边
3. warp-reverse：换行，行的起点在下边

以上两个属性可以合写为 flex-flow

flex-flow: flex-direction flex-wrap;

三、align-content 设置多行元素的排列方式

1. stretch 默认值，如果子元素没有设置高度，会被拉伸
2. flex-start 根据主轴方向排列元素，第二排紧跟第一排，他们之间的缝隙不会被弹性拉伸
3. flex-end 根据主轴方向排列元素，第二排紧跟第一排，并且他的起始位置在主轴的垂直方向的下面
4. space-around 行间距平分
5. space-between 第一行和最后一行分别出现在 垂直主轴的上边和下边，如果有第三行，则行间距相等

四、justify-content 设置主轴方向的对齐方式（重要）

1. flex-start：（默认值）从左到右

2. flex-end：从右到左

3. center：居中

4. space-around：在主轴方向把父级整体的尺寸分按照子元素的数量平分，并且子元素在评分的尺寸范围内居中

5. space-between：第一个子元素在主轴起始位置，第二个子元素在主轴结束位置

   如果子元素的数量大于等于3，则每一个子元素之间的间距相等，第一个子元素在主轴起始位置，最后一个元素在主轴结束位置。

五、align-items 设置垂直于主轴方向的对齐方式

Y轴 垂直于主轴方向

1. stretch：默认值，如果子元素没有高度，则就会被拉伸
2. flex-start：Y轴 的起始点，如果子元素没有高度，则不会被拉伸
3. fiex-end：Y轴 的结束点
4. center：垂直居中
5. baseline：基线对齐