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属性值的相互影响