弹性布局
弹性布局是CSS3中一种现代的布局模式，专门用于设计一维布局（行或列）。它提供了更有效的方式来分配容器内项目的空间和对齐方式，即使项目的大小未知或动态变化。
display:flex
flex是flexible-box的缩写，用于设定弹性盒子
任何的父元素都可以设置flex
当设立display：flex后float，clear，vertical-align都会失效
使用格式
display: 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{
height: 500px;
width: 500px;
background-color: aqua;
display: flex;
}
div span{
height: 200px;
width: 60px;
background-color: red;
}
</style>
</head>
<body>
<div>
<span>one</span>
<span>two</span>
<span>three</span>
</div>
</body>
</html>演示结果
我们可以看到在<div></div>内的子元素都变成了可以设置宽高的弹性项目
justify-content
设置主轴子元素的排列方式
使用格式
justify-content:space-between;属性
| 值 | 描述 |
| flex-start | 默认值，从框架开始的位置排序 |
| flex-end | 从框架后面开始排序 |
| center | 排序位于框架中央 |
| space-around | 每个元素间都有间隙 |
| space-between | 每个元素间都有间隙，并且第一个元素和最后一个元素也有间隙 |
flex-start
flex-end
center
space-around
space-between
align-items
设置侧轴上元素排列的方式
使用格式
align-items: center;属性值
| 值 | 描述 |
| stretch | 默认值，行拉锯拉伸以占据空间 |
| center | 从行的中央排序 |
| flex-start | 从行的开始位置排序 |
| flex-end | 从行的结尾开始排序 |
stretch
center
flex-start
flex-end
