彈性布局display: flex，使用此種布局方式，則無需使用浮動了，總之十分方便。
常用：
在父級設置：
display: flex;將對象作為彈性伸縮盒顯示justify-content: space-around;水平排列方式的設置，具體值根據需要設置，不需要記，看代碼提示就好align-items: center;垂直居中
在子級設置：
flex: 1;按占比分配非設置固定值的空間
說明：除去固定值空間的部分，其余部分占據全部的flex：1的設置，是不能省略的，因為有時候，比如里面包裹一張圖片，在頁面刷新的時候，偶爾會表現非預期，所以，不能省略。
關於兼容性，請參考：https://caniuse.com/#search=flex
關於詳細使用，請參考以下鏈接內容
參考鏈接：
Flex 布局教程：語法篇(阮一峰)
Flex 布局教程：實例篇(阮一峰)
Flex 布局示例
css-tricks.com
scotch.io
最后兩個參考鏈接是純英文的網站，里面的內容十分豐富細致，一些頁面展示無論是布局還是特效都給人耳目一新的感覺，十分值得看一看。