目录
flex布局
flex布局父项的常见属性
flex-direction设置主轴的方向
justify-content设置主轴上的子元素排列方式
flex-wrap设置子元素是否换行
align-items设置侧轴上的子元素排列方式（单行）
align-content设置侧轴上的子元素排列方式（多行）
flex-flow属性是flex-direction和flex-wrap属性的复合属性
子项flex布局
补一下之前没学的flex
flex布局
flex是flexible Box的缩写，表示弹性布局，用来为盒装模型提供最大的灵活度，任何一种容器都可以指定为flex布局
注意事项：
当我们为父盒子施加flex布局以后，子元素的float、clear和vertical-align属性都失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用flex布局的元素，叫flex容器，简称容器
它的所有子元素为容器成员，这些容器成员也被称为flex项目，简称项目
flex布局父项的常见属性
flex-direction设置主轴的方向
我们的元素一般是按照主轴来排列的
主轴和侧轴，也被称为行和列、x轴和y轴
一般默认主轴是x轴方向，水平向右；侧轴方向是y轴方向，水平向下
| 属性值 | 说明 |
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
初始：
从右到左：
从上到下和从下到上
justify-content设置主轴上的子元素排列方式
这种方法可以达到居中对齐的效果
| 属性值 | 说明 |
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 两边贴边，剩余的项目平分剩余空间 |
flex-direction:row; justify-content: center; 
flex-direction:row; justify-content: space-between; 
flex-direction:row; justify-content: space-around; 
如果把主轴设置为y轴：
flex-direction:column; justify-content: space-around; 
解决盒子摆不开的问题：弹性布局会改变内部项目的大小和间距，来保证我们一定塞得下盒子
flex布局下，默认盒子是不换行的
如果想让盒子摆成两行：
flex-wrap设置子元素是否换行
| 属性值 | 说明 |
| nowrap | 默认值，不换行 |
| wrap | 换行 |
justify-content: space-around;flex-wrap: wrap;
align-items设置侧轴上的子元素排列方式（单行）
| 属性值 | 说明 |
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| strech | 拉伸（默认值） |
上下左右都居中：
flex-direction: row;justify-content: space-around;flex-wrap: wrap;align-items: center;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {display: flex;width: 800px;height: 300px;background-color: pink;flex-direction: row;justify-content: space-around;flex-wrap: wrap;align-items:stretch;}div span {width: 150px;/* height: 100px; *//* 子盒子不给高度，才能达到stretch的效果 */background-color: cadetblue;}</style>
</head><body><!-- 补充：flex布局 --><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body></html>
如果改变主轴：
flex-direction: column;justify-content: space-between;flex-wrap: wrap;align-items: center;
align-content设置侧轴上的子元素排列方式（多行）
设置子项在侧轴的排列方式，只适用多行，单行的时候没有效果
| 属性值 | 说明 |
| flex-start | 默认值，从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| strech | 拉伸（默认值） |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
flex-direction: row;justify-content: space-between;flex-wrap: wrap;align-items: center;align-content: space-between;
flex-flow属性是flex-direction和flex-wrap属性的复合属性
复合写法：
flex-flow:column wrap子项flex布局
flex属性定义子项目分配剩余看见，用flex表示占多少份数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {display: flex;/* 给父盒子一个flex */width: 800px;height: 100px;background-color: pink;flex-flow: row wrap;}div span:nth-child(1) {width: 150px;height: 100px;background-color: cadetblue;}div span:nth-child(2) {flex: 1;/* 左右的盒子各占自己的位置，中间的盒子占满剩下的位置 *//* height: 100px;不给高度*/background-color: rgb(187, 105, 146);}div span:nth-child(3) {width: 150px;height: 100px;background-color: rgb(214, 231, 165);}</style>
</head><body><!-- 补充：flex布局 --><div><span>1</span><span>2</span><span>3</span></div>
</body></html>
还可以用flex把父盒子平均分成三份
div span:nth-child(1) {flex: 1;background-color: cadetblue;}div span:nth-child(2) {flex: 1;/* 左右的盒子各占自己的位置，中间的盒子占满剩下的位置 *//* height: 100px;不给高度*/background-color: rgb(187, 105, 146);}div span:nth-child(3) {flex: 1;background-color: rgb(214, 231, 165);}
给第二个盒子设置flex:2;2盒子占1/2的空间，剩下两个盒子各占1/4
align-self控制子项在自己侧轴上的排列方式
div span:nth-child(2) {width: 150px;height: 100px;background-color: rgb(187, 105, 146);align-self: flex-start;}独立设置项目自己的排列方式
order属性定义项目的排列顺序
order里的数字越小越靠前，而z-index里的数字越在前面
默认的order：0；，我们设置为-1就可以改变排序
order:-1;