Flex 布局注意事项

问题1：Flex元素会对父级、同级、同级中元素的margin产生影响；使其margin传递到父级，变成父级的margin，而无法将父级撑开。

解决: 产生margin传递是因为父级的高度没有被撑开，可以在父级增加属性：overflow:auto 或 overflow:hidden;

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

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

问题3：flex下的自动margin

设置了 margin: auto 的元素，在通过 justify-content和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin；margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。

 如果任意方向上的可用空间分配给了该方向的自动 margin ，则对齐属性（justify-content/align-self）在该维度中不起作用，因为 margin 将在排布后窃取该纬度方向剩余的所有可用空间。

也就是使用了自动 margin 的 flex 子项目，它们父元素设置的 justify-content 以及它们本身的 align-self 将不再生效，也就是这里存在一个优先级的关系。

• 块格式化上下文中margin-top 和 margin-bottom 的值如果是 auto，则他们的值都为 0
• flex 格式化上下文中，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 元素
• 单个方向上的自动 margin 也非常有用，它的计算值为该方向上的剩余空间
• 使用了自动 margin 的 flex 子项目，它们父元素设置的 justify-content 以及它们本身的 align-self 将不再生效