css - 为什么 flex-direction 在没有显示 : flex being specified? 的情况下工作

Question

当我在容器中有 flex-direction 时，是否需要指定 display 属性。它似乎工作得很好，但我担心我破坏了一些东西:

.App {
    background-color: white;
    flex-direction: column;
    padding:15px;
    font-family: 'Roboto', sans-serif;
}

Answer 1

在 block 格式化上下文(display: block)中，默认情况下， block 元素占用其父元素的整个宽度。因此，各个元素垂直堆叠。

来自规范:

9.4.1 Block formatting contexts

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

在 flex 格式上下文(display: flex)中，使用 flex-direction: column，单个元素也垂直堆叠，类似于display: block 中的布局。

所以您看到了类似的行为，但实际上，flex-direction 属性在 block 格式化上下文 中被忽略了。