11.17 CSS 弹性容器

如前所述，当display的值为flex或inline-flex时，将生成弹性容器（Flex Containers）：

flex

这个值会导致一个元素生成一个块级（block-level）弹性容器框。

inline-flex

这个值会导致一个元素生成一个行内级（inline-level）弹性容器框。

我们在CSS入门课程中讲述过block布局的元素会创建一个BFC。类似的，一个弹性容器为其内容建立了一个新的弹性格式化上下文环境（FFC）。其中，浮动不会影响弹性容器，并且弹性容器的margin不会和其内容的margin发生合并（collapse）。弹性容器为其内容构建包含块的行为和块容器完全一样。overflow属性适用于弹性容器。

弹性容器不是块容器，因此一些假设使用块布局的属性不适用于弹性布局的场合。特别是以下几个：

• 在CSS3多列布局模块中定义的 column-* 属性不适用于弹性容器。

• float 和 clear 属性对于弹性项没有作用，并不会把它带离文档流（或相反）。然而，浮动属性仍然会通过影响display属性的计算值而影响box的生成。

• vertical-align 属性对于弹性项没有作用

• ::first-line 和 ::first-letter 伪元素不适用于弹性容器，而且弹性容器不为他们的祖先提供第一个格式化的行或第一个字母。

如果元素的display值是inline-flex，则其显示属性在某种条件下被计算为flex，参考阅读：display/float/position属性值的相互影响