Flex伸缩布局

伸缩布局

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

如下图：

**主轴：**Flex容器的主轴主要用来配置Flex项目，默认是水平方向

**侧轴：**与主轴垂直的轴称作侧轴，默认是垂直方向的

**方向：**默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

​

使用说明

1. 指定一个父盒子为伸缩盒子，即指定：display: flex
2. 明确你需要的主侧轴方向，并设置flex-direction 默认是row ，纵向是column
3. 设置父盒子的属性来调整子元素的布局，例如align-items
4. 设置子盒子的宽高或者比例，完成具体的子元素在父盒子中的布局

各个属性介绍

1. flex-direction调整主轴方向（默认为水平方向）
2. justify-content调整主轴对齐
3. align-items调整侧轴对齐（子元素可以使用align-self覆盖）
4. flex-wrap控制是否换行
5. align-content堆栈（由flex-wrap产生的独立行）对齐
6. flex-flow是flex-direction + flex-wrap的简写形式
7. flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
8. order控制子项目的排列顺序，正序方式排序，从小到大

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参考示例源码。