为什么div的内容受其显示影响？

Question

摘要：我希望并排有两个文本块（包含在div中），这两个块通过flexbox进行管理。但是，他们的内容受到父display的{​​{1}}的影响。

（以下代码位于JSFiddle）

为什么以下代码

div

由以下CSS修改

<div class="flex">
  <div class="flex">
    this is the content of the left box
  </div>
  <div class="flex">
    this is the content of the right box
    <p>
      with some paragraphs
    </p>
    <p>
      more paragraphs
    </p>
  </div>
</div>

显示为

我期待这两段落在“这是正确的方框的内容”之下。为什么他们遵循.flex { display: flex; flex-direction: row; } 与行div的行对齐？ 我怎么能阻止他们这样做？ （我的印象是flex只会覆盖display: flex容器，但这些div的内容将呈现为默认定位

Answer 1

因为flex-container的子元素是flex-items并且丢失了它们的默认显示属性。

甚至文字节点......

  

Flex容器的每个in-flow子项都变为flex项，并且直接包含在flex容器内的每个连续文本行都包装在一个匿名的flex项中。

来自Spec

  

弹性项为其内容建立新的格式化上下文。与往常一样，此格式化上下文的类型由其显示值确定。但是， flex项目本身就是弹性级别的框，而不是块级框：它们参与其容器的flex格式化上下文，而不是块格式化上下文。

因此，要实现所需的布局，请确保子div不是display:flex。

.flex {
  display: flex;
  flex-direction: row;
}
.flex div {
  border: 1px solid grey;
}

<div class="flex">
  <div class="">
    this is the content of the left box
  </div>
  <div class="">
    this is the content of the right box
    <p>
      with some paragraphs
    </p>
    <p>
      more paragraphs
    </p>
  </div>

</div>