Flex布局與傳統(tǒng)布局對比
網(wǎng)頁布局主要包括全屏布局，水平居中齐遵，垂直居中和sticky Footer布局氮采。
一、布局的傳統(tǒng)解決方案是基于盒狀模型呆馁，依賴display+position+float方式來實現(xiàn)桐经，靈活性較差，比如：垂直居中不容易實現(xiàn)浙滤。（盒狀模型是由margin阴挣、padding、border和content幾個屬性組合形成的纺腊。）
二畔咧、2009年，W3C提出了一種新的方案-Flex（Flexible Box）彈性布局揖膜，用來為盒狀模型提供最大的靈活性誓沸，任何一個容器都可以指定為Flex布局，可以簡便壹粟、完整拜隧、響應(yīng)式地實現(xiàn)各種頁面布局。
Flex布局原理
通過給父盒子添加flex屬性，來控制盒子的位置和排列方式
display:flex;
注：當父盒子被設(shè)為flex布局后洪添，子元素的float垦页、clear和vertical-align屬性都會失效
父級元素flex布局常見屬性
flex-direction：設(shè)置主軸的方向
justify-content：設(shè)置主軸上的子元素的排列方式
flex-wrap：設(shè)置子元素是否換行
align-content：設(shè)置側(cè)軸上的子元素的排列方式(多行)
align-items：設(shè)置側(cè)軸上的子元素排列方式(單行)
flex-flow：復合屬性，相當于同時設(shè)置了flex-direction和flex-wrap
子元素flex布局常見屬性
flex:子元素占的份數(shù)(默認為0)
子元素的flex屬性：表示占剩余空間的分數(shù)
如：css布局中的圣杯布局干奢、雙飛翼布局（兩邊盒子固定痊焊，中間部分自適應(yīng)），可使用flex布局來處理剩余空間的份數(shù)
align-self:控制子元素自己在側(cè)軸上的排列方式
order:控制子元素的排列順序
更多推薦：
前端布局方式總結(jié)：https://juejin.cn/post/7005557017716883470
經(jīng)典布局詳解——圣杯布局忿峻、雙飛翼布局薄啥、Flex布局和絕對定位布局 - 簡書 (jianshu.com)
