Flex布局与传统布局对比
网页布局主要包括全屏布局，水平居中，垂直居中和sticky Footer布局。
一、布局的传统解决方案是基于盒状模型，依赖display+position+float方式来实现，灵活性较差，比如：垂直居中不容易实现。（盒状模型是由margin、padding、border和content几个属性组合形成的。）
二、2009年，W3C提出了一种新的方案-Flex（Flexible Box）弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex布局原理
通过给父盒子添加flex属性，来控制盒子的位置和排列方式
display:flex;
注：当父盒子被设为flex布局后，子元素的float、clear和vertical-align属性都会失效
父级元素flex布局常见属性
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素的排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式(多行)
align-items：设置侧轴上的子元素排列方式(单行)
flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
子元素flex布局常见属性
flex:子元素占的份数(默认为0)
子元素的flex属性：表示占剩余空间的分数
如：css布局中的圣杯布局、双飞翼布局（两边盒子固定，中间部分自适应），可使用flex布局来处理剩余空间的份数
align-self:控制子元素自己在侧轴上的排列方式
order:控制子元素的排列顺序
更多推荐：
前端布局方式总结：https://juejin.cn/post/7005557017716883470
