1. flex布局体验
传统布局 flex弹性布局
兼容性好 操作方便，布局极为简单，移动端应用很广泛
布局繁琐 PC端浏览器支持情况较
局限性，不能再移动端很好的布局 IE 11或更低版本，不支持或仅部分支持
建议：
1. 如果是PC端页面布局，我们还是传统布局。
2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。
初体验
1. 搭建HTML结构
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: darkorange;
justify-content: space-around;
}
div span{
/* width: 150px; */
height: 100px;
background-color: forestgreen;
margin-right: 5px;
flex: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
网页显示：
2. flex布局原理
1. 布局原理
flex是flexible的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = flex布局
采用flex布局的元素，称为flex容器（flex container），简称“容器”。 它的所有子元素自动成为容器成员，称为flex
项目（flex item ），简称“项目”。
体验中 div就是flex父容器。
体验中span就是子容器flex项目。
子容器可以横向排列也可以纵向排列。
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
3. flex布局父项常见属性
1. 常见父项属性
一下由6个属性是对父元素设置的
flex-direction： 设置主轴的方向
justify-content： 设置主轴上的子元素排列方式
flex-wrap： 设置子元素是否换行
align-content： 设置侧轴上的子元素的排列方式（多行）
align-items： 设置侧轴上的子元素的排列方式（单行）
flex-flow： 复合属性，相当于同时设置了flex-direction和flex-wrap
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 80%;
height: 300px;
background-color: darkorange;
/* 默认的主轴是 x轴 row */
flex-direction: row;
/* justify-content: 是设置主轴上子元素的排列方式; */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 让我们子元素居中对齐 */
/* justify-content: center; */
/* 平分剩余空间 */
justify-content: space-around;
}
div span{
width: 150px;
height: 100px;
background-color: forestgreen;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
网页显示：
2. flex-direction 设置主轴的方向
1. 主轴与侧轴
在flex布局中，是分为主轴和测轴两个方向，同样的叫法有：行和列、 x轴和y轴
默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下
2. flex-firection 设置主轴的方向
2. 属性值
flex-direction属性决定主轴的方向（及项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴。
而我们的子元素是跟着主轴来排列的。
| 属性值 | 说明 |
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
3. justify-content 设置主轴上的子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个。
| 属性值 | 说明 |
| flex-start | 默认值从头部开始如果主轴都是x轴，则从左到右 |
| row-reverse | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| space-around | 平 分剩余空间 |
| space-between | 先两边贴边 在评分剩余空间（重要）从下到上 |
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
/* 给父级添加flex属性 */
display:flex;
width: 800px;
height: 300px;
background-color: darkorange;
/* 默认的主轴是 x 轴 行 row 那么y轴就是侧轴 */
/* 我们的元素是跟这主轴来排列的 */
/* flex-direction: row; */
/* 简单了解 翻转 */
/* flex-direction: row-reverse; */
/* 我们可以把我们的主轴设置为y轴那么 x轴就成了侧轴 */
flex-direction: column;
}
div span{
width: 150px;
height: 100px;
background-color: forestgreen;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
网页显示图：
flex布局子项常见属性
1. align-self 控制子项自己在侧轴上的排列方式
ailgn-self 属性允许单个项目由于其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch 。
span:nth-child(2){
/*设置自己在侧轴上的排列方式*/
align-self:flex-end;
}
2. order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0.
注意：和z-index不一样。
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: forestgreen;
/* 让三个字盒子沿着侧轴底侧对齐 */
/* align-items: flex-end; */
/* 我们想只让3号盒子下来底侧 */
}
div span{
width: 150px;
height: 100px;
background-color: fuchsia;
margin-right: 5px;
}
div span:nth-child(2){
/* 默认是0 -1比0小所以在前面 */
order: -1;
}
div span:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
网页显示图：
