css弹性盒子

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