Flex布局是我们现代前端开发中很常用的一个布局模式，相比于传统的float和block，flex布局更加的智能和便捷，对各种网页的适应性能更强。
CSS的Flex布局为网页设计带来了革命性改进。其核心优势在于能够高效、直观地控制容器内项目的排列、对齐与空间分配。
现在我们有一个元素盒子div，里面装着5个item：
我们给父元素div的css属性添加display:flex，会发现我们的item元素失去了他的部分块级元素属性（独占一行）。其子元素（称为“Flex项目”）会脱离常规的块级/行内文档流，转而遵循Flex布局的规则。
现在我们再来看一下Flex布局的规则是什么：在flex布局容器中，Flex项目是是随着容器的主轴和交叉轴进行排列的。我们默认的主轴（justify）方向是从左往右，交叉轴（align）的方向是从下到上垂直于主轴。
核心规则1：主轴的方向和起点/终点由容器属性控制
核心规则2：所有Flex项目沿主轴排列
Flex布局的对齐方式分为两种，主轴对齐和交叉轴对齐，两种对齐方式可以共存一同发挥作用。
主轴对齐方式：修改父元素中的justify-content属性
.container {
/* 对齐方式 */
justify-content: flex-start; /* 默认：从主轴起点开始排列 */
justify-content: flex-end; /* 从主轴终点开始排列 */
justify-content: center; /* 居中排列 */
justify-content: space-between; /* 两端对齐，项目间等距 */
justify-content: space-around; /* 每个项目两侧等距 */
justify-content: space-evenly; /* 项目与边框、项目之间完全等距 */
}
比如我现在修改为justify-content: center;，原来盒子的排列就会变成这样
交叉轴对齐方式：修改父元素中的align-items属性（针对单行）：
.container {
/* 对齐方式（针对单行） */
align-items: stretch; /* 默认：拉伸填满容器高度（注意我这里是给盒子添加了margin，不然将会占满容器） */
align-items: flex-start; /* 交叉轴起点对齐（上/左） */
align-items: flex-end; /* 交叉轴终点对齐（下/右） */
align-items: center; /* 交叉轴居中对齐 */
align-items: baseline; /* 基线对齐（文本底部对齐） */
}
现在大家可以尝试变更上面代码片段里的flex属性，来看看效果会变成什么样~
