Flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。

但是对于一些特殊布局如垂直居中就特别不容易实现。但Flex布局，可以简便、完整、响应式地实现各种页面布局。

flex布局的属性用法有很多，但我经常用的也就几个(真相是其它的我也不是很明白，只能先写自己明白的了)。

flex布局  为弹性布局1.只要给一个元素（div,p）加一个display:flex;的样式它将变成一个容器

如：
.box{
display:flex;
}
是容器：
--容器中的子元素会自动排列在一排
--还可以操控子元素的对齐方式(水平 垂直)
2.行内元素也可以使用Flex布局   （通常用于导航栏，侧边栏等）
.box{
display:inline-flex;
}
3.总结：
display:flex;把盒子变成容器
flex-direction: column; 改变主轴的方向为垂直
flex-wrap:wrap; 允许项目（子元素）换行
justify-content: space-between;  两端对齐，项目之间的间隔都相等
                        flex-start（默认值）：左对齐
                        flex-end：右对齐
                        center： 居中
                        space-around：每个项目两侧的间隔相等。（平均分布）
                     ;
align-items属性定义项目在交叉轴上如何对齐。
align-items:center;居中

flex:1; 分配剩余宽度