Flexbox布局疑问：header未按预期排列，如何实现横向布局？

首先得纠正你对flex-direction的理解误区：flex-direction: column是让子元素纵向排列（上下叠放），而横向排列需要用flex-direction: row——这是你当前问题的核心原因。

接下来看代码里的具体问题：

• 要使用flex布局的容器，必须先设置display: flex，否则flex-direction等属性完全不生效。你的.App、header、.Content都只加了flex-direction，却没加display: flex，只有html加了，但这不是你需要控制的目标容器。
• 你给header设置了flex-direction: column，这会让它的子元素（img、nav、Controls）默认纵向排列，和你想要的横向效果完全相反。
• .Content你设置了flex-direction: row，但你需要的是内容纵向排列，这里应该用column。

修改方案 #

1. 给.App、header、.Content都加上display: flex，让它们成为有效的flex容器。
2. 把header的flex-direction改成row，这样它的子元素（logo、导航、按钮组）就会横向排列。
3. 把.Content的flex-direction改成column，让内容条目保持上下排列的预期。
4. 可选优化：给header加上align-items: center让子元素垂直居中，给nav和.Controls也加上display: flex和gap，让内部链接、按钮的间距更均匀（你说导航链接表现符合预期，这一步是锦上添花）。

修正后的代码 #

* { margin: 5px; padding: 5px; border: 1px #ccc solid; }
.App { 
  display: flex; /* 新增：成为flex容器 */
  flex-direction: row; /* 保持App的子元素（header和Content）横向排列 */
}
header { 
  display: flex; /* 新增：成为flex容器 */
  flex-direction: row; /* 改为row，让内部元素横向排列 */
  align-items: center; /* 可选：垂直居中内部元素 */
  gap: 20px; /* 可选：子元素之间的间距 */
}
nav, .Controls {
  display: flex; /* 新增：让内部链接/按钮横向排列更可控 */
  gap: 10px; /* 可选：内部元素间距 */
}
.Content { 
  display: flex; /* 新增：成为flex容器 */
  flex-direction: column; /* 改为column，让内容纵向排列 */
}

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

这样修改后，header里的logo、导航链接、控制按钮就会全部横向排成一行，Content区域的内容也会保持纵向排列的预期效果啦。

内容的提问来源于stack exchange，提问作者P.H.