CSS中的flex布局

1.首先我们要明白在了解flex布局之前的百分比布局和flex布局有什么区别

传统布局的兼容性好 布局繁琐 不能在移动端很好的布局

flex布局 操作简单 移动端应用广泛 兼容性不好

如果是不考虑兼容性的pc端布局，可以使用flex弹性布局

2.flex布局的原理

flex是flexible Box的缩写，意思为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

当我们为父元素设定为flex布局以后 子元素的float，clear和vertical-align属性将失效

采用flex布局的元素称为flex容器 他的所有的子元素称为flex项目

总结一下：flex通过给父元素添加flex属性，来控制子元素的盒子的位置和排列方式

3.常见的父元素属性

• flex-direction: 设置主轴方向;

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有x轴和y轴

默认主轴方向就是x轴方向（水平向右） 侧轴方向就是y轴方向（垂直向下）

在父元素上添加

1. row 相当于添加了一个flex-direction属性为row 默认值从左到右

我们的元素是跟着主轴来排列的

2. row-reverse 从右到左

3. column 从上到下 （这属性可以把主轴设置为y轴 那么侧轴就是x轴）

4. column-reverse从下到上

• justify-content: 设置主轴上的子元素的排列方式;

属性定义了项目在主轴上的对齐方式 在使用之前一定要确定好主轴是哪个

5. flex-start 默认值从头部开始，如果主轴是x轴 则从左到右

6. flex-end 从尾部开始排列

7. center 从主轴居中对齐（如果主轴是x轴，则水平居中）

8. space-around 平分剩余空间

9. space-between 先两边贴边 在平分中间（重要）

• flex-wrap: 设置子元素是否换行;

默认不换行 默认所有的子元素都排列在轴线上 如果装不开 会缩小子元素的宽度放到父元素里面

10. nowrap 默认值不换行

11. wrap 换行

• align-content: 设置侧轴上的子元素的排列方式（多行）;

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

12. flex-start 默认值在侧轴的头部开始排列

13. flex-end在侧轴的尾部开始排列

14. center在侧轴的中线显示

15. space-around子项在侧轴平分剩余空间

16. space-between 子项在侧轴先分布在两头，在平分剩余空间

17. stretch 设置子项元素高度平分父元素高度

• align-items: 设置侧轴上子元素的排列方式（单行）;

该属性是设置控制子元素项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

18. flex-start 默认值从上到下

19. flex-end 从下到上

20. center 垂直居中

21. stretch 拉伸 但是子盒子不要给高度

• flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap;

align-items和align-content的区别

• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸

• align-content 适用于多行的情况下，可以设置上对齐，下对齐，居中拉伸以及平均分配剩余空间等属性值

常见的子元素属性

• flex子元素占的份数

首先 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。

flex属性定义子元素分配的剩余空间 用flex来表示占多少份数

flex:1 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度（flex-direction: colunm; 则为高度）如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。

• align-self 控制子元素自己在侧轴的排列方式

允许单个项目与其他项目不一样的对齐方式 可覆盖 align-items属性

默认值为auto 表示继承父元素的align-items属性，若果没有父元素 则等同与stretch

• order属性定义子项的排列顺序（前后顺序）