Flexbox 似乎不尊重 flex-direction: 标题元素的列答案

【问题标题】：Flexbox appears to not be honoring flex-direction: column for a header elementFlexbox 似乎不尊重 flex-direction: 标题元素的列
【发布时间】：2018-01-21 06:09:40
【问题描述】：

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

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

内容按我的预期显示，但在标题标签内，只有链接在做我期望的事情。这是为什么？需要进行哪些更改才能使徽标、链接 #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>

感谢您的帮助！

【问题讨论】：

否...flex-direction:column 将在列中布局元素。

标签： html css flexbox

【解决方案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/

希望这会有所帮助。

【讨论】：

我实际上删除了显示：flex;使示例更简单的条目并删除它们没有任何效果。你找到了我困惑的关键。弹性方向：行；是我需要的（以及添加 display: flex;）！太感谢了。我会去阅读建议的链接。

【解决方案2】：

flex-direction: column 将垂直堆叠元素，如列，而不是水平堆叠，如行。

由于 Flexbox 是父/子关系，将 display: flex 添加到 html 只会使 body 成为弹性项目。

flex-direction 是一个 flex 容器 属性，需要与 display: flex（使元素成为 flex 容器）结合来应用和控制子元素的 flex 方向。

在下面的示例中，应用的属性将使App 的子代垂直堆叠，而header 的水平堆叠。

堆栈sn-p

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

.App {
  display: flex;
  flex-direction: column;          /*  stack vertically  */
}

header {
  display: flex;
  flex-direction: row;              /*  default (can be omitted), horizontal  */
}

<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>

【讨论】：

【解决方案3】：

因为你试图在不是弹性容器的元素上使用弹性方向。

“Display”属性不是继承的，所以你基本上是在 display:block 项目上设置 flex-direction，这绝对不会做任何事情。

如果你想让孩子表现得像弹性项目，你需要给每个元素添加 display:flex。

<style>
* {
margin: 5px;
padding: 5px;
border: 1px #ccc solid;
}
html {
display: flex;
}
.App {
  display: flex;
flex-direction: row;
}
header {
  display: flex;
flex-direction: column;
}
.Content {
  display: flex;
flex-direction: row;
}
</style>
<html>
    <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>
</html>

【讨论】：

“behave like”可以改写为“be”。

【解决方案4】：

将display:flex 应用于header。

其余的都是不必要的，此时flex-direction 语句将无效，因为您没有将display:flex 添加到这些元素中。

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

header {
  display: flex;
}

<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>

【讨论】：