FFC（Flex Formatting Contexts）Flex格式化上下文
如上所述，当 display 的值为 flex 或 inline-flex 时，将生成弹性容器（Flex Containers）。

一个弹性容器为其内容建立了一个新的弹性格式化上下文环境（FFC）。

值得注意的是，弹性容器不是块容器，下列适用于块布局的属性不适用于弹性布局：

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

  • float 和 clear 属性对于弹性项没有作用，并不会把它带离文档流（或相反）。然而，浮动属性仍然会通过影响display属性的计算值而影响box的生成。
  • vertical-align 属性对于弹性项没有作用
  • ::first-line 和 ::first-letter 伪元素不适用于弹性容器，而且弹性容器不为他们的祖先提供第一个格式化的行或第一个字母。

看看下面的结构: 

.box{display: flex;}

<div class="box">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>

如上所示，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。弹性容器中的弹性项（flex item）表示其文档流（in-flow）内容中的框。

关于flex，推荐学习看《弹性布局：flex的学习-css实现水平垂直居中》