Flex布局

1.什么是flex布局

flex表示弹性布局，为盒模型提供最大的灵活性。

2.flex布局的一些基本概念

• 容器：采用flex布局的元素被称为容器
• 项目：在flex布局中的子元素被称为项目
• 项目要在容器中显示，在容器中有水平的主轴和垂直的交叉轴，项目在容器中沿主轴排列

3.容器的一些属性

1.flex-direction：设置容器主轴的方向，元素根据主轴排列。

• row：默认值，沿水平方向，从左到右
• row-reverse：沿水平方向，从右到左
• column：垂直方向，由上到下
• column-reverse：垂直方向，由下到上

2.justify-content：设置项目在容器主轴的排列方式（若主轴方向使用flex-direction改变，则根据改变后的主轴设置对齐方式）

• flex-start：默认值，从主轴的顶端对齐
• flex-end：从主轴的末端对齐
• center：居中
• space-between：先两边贴边，再分配剩余的空间
• space-around：每个项目两侧的间距相等

3.align-items：设置项目在容器交叉轴的排列方式。单行

• stretch：默认值。如果项目未设置高度或者高度为auto，将占满整个容器的高度。
• flex-start：从交叉轴的顶端对齐
• flex-end：从交叉轴的末端对齐
• center：挤在一起居中

4.align-content：设置项目在容器交叉轴的排列方式。多行，当设置了flex-wrap：wrap时才有效。单行时无效。

• flex-start：默认值，从侧轴的顶端对齐
• flex-end：从侧轴的末端对齐
• center：居中
• space-between：先两边贴边，再分配剩余的空间
• space-around：每个项目两侧的间距相等
• stretch：如果项目未设置高度或者高度为auto，将占满整个容器的高度。

5.flex-wrap：设置项目在当前容器中无法一行显示该如何处理

• nowrap：默认不换行，项目的宽度设置失效了，强制在一行显示
• wrap：正常换行，第一个位于第一行的第一个

6.flex-flow：是flex-direction和flex-wrap的简写，默认【row nowrap】

• 第一个属性是flex-direction的值
• 第二个属性是flex-wrap的值

4.项目的一些属性

1. flex：子项目分配剩余空间，用flex表示占剩余空间的多少份。
2. order：设置项目排列的位置，默认为0，数值越小越靠前
3. align-self：当前项目和其他项目在交叉轴有不同的对齐方式。