CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種用於在頁面上佈置元素的佈局模式，使得當頁面佈局必須適應不同的屏幕尺寸和不同的顯示設備時，元素可預測地運行。對於許多應用程序，彈性盒子模型提供了對塊模型的改進，因爲它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。
css3使用display:flex或這dispaly：inline-flex
這樣做將元素定義爲彈性容器，其子元素則成爲彈性項目。值 flex 使彈性容器成爲塊級元素。值 inline-flex 使彈性容器成爲單個不可分的行內級元素。
彈性盒子垂直居中：
父容器 {
display:flex
}
子容器 {
margin:auto
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
對父容器display屬性設置爲flex,再將子元素的margin屬性設置爲auto，就可以實現子元素相對父元素居中。
採用Flex佈局後，子元素的樣式float、clear、和vertical-align失效
justify-content:space-between
