html - Flexbox 似乎不遵守 flex-direction : column for a header element

Question

我确定这是由于我的一些误解，但似乎在元素上设置 flex-direction: column 应该使该元素的子元素显示在水平行中。

我正在尝试做一个非常简单的布局。在顶部，您应该看到标准 Logo ，然后是一些导航链接，我还有一些控件。在其下方，内容应显示在单个列中，每个条目都在前一个条目下方。

内容如我所料显示，但在 header 标记内，只有链接符合我的预期。这是为什么？需要更改什么才能使 Logo 、链接 #1、链接 #2、a 和 b 都显示在一行中？

* {
  margin: 5px;
  padding: 5px;
  border: 1px #ccc solid;
}

html {
  display: flex;
}

.App {
  flex-direction: row;
}

header {
  flex-direction: column;
}

.Content {
  flex-direction: row;
}

<div class='App'>
  <header>
    <img src='#.png' alt='logo'>
    <nav>
      <a href='#'>Link 1</a>
      <a href='#'>Link 2</a>
    </nav>
    <div class='Controls'>
      <button>a</button>
      <button>b</button>
    </div>
  </header>
  <div class='Content'>
    <p>Lorem ipsum ...</p>
    <p>Lorem ipsum ...</p>
  </div>
</div>

感谢您的帮助!

Answer 1

您将 flex 赋给了错误的元素。你应该把它给 header 因为这是你在那个 div 中所有其他元素的父元素，如下所示:

header{
display:flex;
flex-direction:row;
}

查看本教程，其中解释了有关 Flexbox 的所有内容: https://medium.freecodecamp.org/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af

或此处的快速指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这对您有所帮助。