flex布局 （解决了margin传递、重叠（叠加）问题）
Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。任何一个容器都可以指定为Flex布局。.box {display: flex;}行内元素也可以使用Flex布局。.box {display: inline-flex;}最新版本，使用display:flex或者display:inline-flex...
·
Flex布局（伸缩布局盒模型）是CSS3提出的一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。
任何一个容器都可以指定为Flex布局。
.box {
display: flex;
}行内元素也可以使用Flex布局。
.box {
display: inline-flex;
}- 最新版本，使用display:flex或者display:inline-flex
- 兼容
display:flexbox;
display:flex;Flex布局对子元素的影响：
- 子元素的
float、clear和vertical-align属性将失效。 - 解决了margin传递、重叠（叠加）问题
当使用margin时，会出现两个问题：
问题1、父子间的margin，会由子级传递到父级
问题2、兄弟间margin，会上下叠加
普通解决方法：
问题1、父子间的margin，会由子级传递到父级
解决方法: margin传递的产生的原因是父级的高度没有被自动撑开，所以在父级父级增加属性： overflow: auto 即可解决
问题2、兄弟间margin，会上下叠加
解决方法：浏览器为了保证列表的整齐，上下margin产生了叠加，不能直接解决。只能通过减少一个margin的方式。如只定义margin-top:100px; margin-bottom:0px。的方式解决。
不是很完美。经过实验，发现flex弹性魔盒可以完美解决问题
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)