伸缩布局（CSS3）
CSS3在布局方面做了非常大的改进，使得对块级元素的布局变得十分灵活，适应性非常强，其强大的伸缩性，在响应式中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向 的。
方向：默认主轴从左向右，侧轴默认从上到下；
主轴和侧轴并不是固定不变的，通过flex-direction可以互换；
Flex布局的语法规范经过几年发生了很大的变化，也给Flex的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多；
2、各属性详解
1）flex子项在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小宽度值；
max-width 最大宽度值；
2)flex-direction调整主轴方向（默认水平方向）
column：垂直方向；
row：水平方向
3）justify-content调整主轴对齐
flex-start:默认值。让子元素从父容器的开头排序
flex-end：项目位于容器的结尾
center：项目位于容器的中心；
space-between：项目位于各行之间留有空白的容器内
space-around：项目位于各行之前、之间、之后都留有空白的容器内；
4、align-items调整侧轴对齐
stretch：默认值。项目被拉伸以适应容器。
center: 项目位于容器的中心
flex-start:项目位于容器的开头
flex-end:项目位于容器的结尾
5）flex-wrap控制是否换行
nowrap：默认值，规定灵活的项目不拆迁或不拆列。不换行，则收缩（压缩）显示
wrap：规定灵活的项目在必要的时候拆行或拆列
wrap-reverse：规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
6）align-content堆栈（由flex-wrap产生的独立行）对齐
必须对父元素设置自由盒属性display:flex；并且设置排列方式为横向排列flex-direction:row；并且设置换行，flex-wrap:wrap；这样这个属性的设置才会起作用；
stretch：默认值；
center：项目位于容器的中心
flex-start：项目位于容器的开头
flex-end：项目位于容器的结束
space-between：项目位于各行之间留有空白的容器内
space-around：项目位于各行之前、之间、之后都留有空白的容器内；
7）flex-flow是flex-direction\flex-wrap的简写形式
flex-flow：flex-direction flex-wrap;
8）order控制子项目的排列顺序，正序方式排序，从小到大；
用CSS来控制盒子的前后顺序，用order就可以；
用整数值来定义排列顺序，数值小的排在前面，可以为负值，默认值是0；
此知识点重在理解，要明确找出主轴、侧轴、方向、各属性对应的属性值；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
section {
width: 300px;
height: 100px;
margin: 80px auto;
border: 1px solid orange;
/*父级盒子添加 flex*/
display: flex; /* 伸缩布局模式 */
flex-direction: column;
}
section div {
height: 100%;
flex: 1; /* 子盒子分成多少份 */
}
section div:nth-child(1) {
background-color: blue;
}
section div:nth-child(2) {
background-color: red;
}
section div:nth-child(3) {
background-color: green;
}
section div:nth-child(4) {
background-color: skyblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>效果如下：
