Flex布局
1.Flex组成
设置方式:给父元素设置display: flex，子元素可以自动挤压或拉伸
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向
- 侧轴/交叉轴:默认在垂直方向
分析:
| 自动设置,由代码实现. |
2.主轴与侧轴对齐方式
2.1 主轴对齐方式(横轴)
属性名: justify-content
2.2 侧轴对齐方式 (纵轴)
属性名
align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置).align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置)
<th>属性值</th>
<th>效果</th>
</tr>
<td>stretch</td>
<td>弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸)
</tr>
<tr>
<td>center</td>
<td>弹性盒子沿侧轴居中排列</td>
</tr>
<tr>
<td>flex-start </td>
<td>弹性盒子从起点开始依次排列
</tr>
<tr>
<td>flex-end</td>
<td>弹性盒子从终点开始依次排列
</tr>
分析:
| 前两个重点,后两个基本不用. |
2.3 修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名:flex-direction
属性值
分析:
| 只记colum. 修改主轴方向垂直方向;侧轴自动变换到水平方向 |
3.弹性伸缩比
作用︰控制弹性盒子的主轴方向的尺寸。
属性名: flex
属性值:整数数字，表示占用父级剩余尺寸的份数。
分析:
| 默认情况下，主轴方向尺寸是靠内容撑开:侧轴默认拉伸 |
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局-弹性伸缩比</title>
<style>
/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
.box {
display: flex;
flex-direction: column;
height: 300px;
border: 1px solid #000;
}
.box div {
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1) {
width: 200px;
}
.box div:nth-child(2) {
flex: 1;
}
.box div:nth-child(3) {
flex: 2;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4.弹性换行与行对齐方式
4.1 弹性换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名: flex-wrap
属性值
- wrap:换行
- nowrap:不换行（默认)
4.2 行对齐方式
属性名: align-content
属性值
