flex布局 （解决了margin传递、重叠（叠加）问题）

Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。

任何一个容器都可以指定为Flex布局。

.box {
    display: flex;
}

行内元素也可以使用Flex布局。

.box {
  display: inline-flex;
}

1. 最新版本，使用display:flex或者display:inline-flex
2. 兼容

display:flexbox;
display:flex;

Flex布局对子元素的影响：

1. 子元素的float、clear和vertical-align属性将失效。
2. 解决了margin传递、重叠（叠加）问题

当使用margin时，会出现两个问题：
问题1、父子间的margin，会由子级传递到父级
问题2、兄弟间margin，会上下叠加

 

普通解决方法：

问题1、父子间的margin，会由子级传递到父级

解决方法: margin传递的产生的原因是父级的高度没有被自动撑开，所以在父级父级增加属性：  overflow: auto 即可解决

问题2、兄弟间margin，会上下叠加

解决方法：浏览器为了保证列表的整齐，上下margin产生了叠加，不能直接解决。只能通过减少一个margin的方式。如只定义margin-top:100px;  margin-bottom:0px。的方式解决。

不是很完美。经过实验，发现flex弹性魔盒可以完美解决问题