本文主要探讨了使用Flex布局时的一些关键注意点，包括align-items和align-content的区别，flex属性的计算过程，以及在滚动条不生效情况下的解决方案。通过实例分析，解释了如何在单行和多行布局中运用这两个属性，并详细阐述了flex-basis在百分比情况下的计算规则。此外，还提到了一种解决子元素滚动条不生效的方法，即设置width或height为0。
flex 现在是前端布局利器，简单的就不多说了，直接看阮一峰的 Flex 布局教程，我这里主要记录一下平时使用 flex 的一些注意点。
注意点 1
flex 会让容器元素变为 BFC，让子元素变为层叠上下文元素，可以看BFC 和 SC这篇文章，也会让子元素的 float、clear、vertical-align 属性失效。
align-items 和 align-content
这两个属性都是垂直居中的，区别就是对于单行还是多行。举个例子：
<div class="flex">
<div class="item"></div>
<div class="item">
最低0.47元/天 解锁文章
扫一扫
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
