弹性方向：行不工作；它仍然显示为一列

Question

我有一个导航栏，我想在小屏幕上显示为一列，在桌面屏幕尺寸上显示为一行。我的问题是我不知道为什么“flex-direction: row;”不会更改导航栏以并排显示。

 .top-nav li {
  list-style-type: none;
  font-size: 22px;
  border: 2px solid #333;
  width: 80%;
  padding: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 2px #333;
}
.top-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.top-nav ul {
  padding: 0;
  margin: 0;
}
@media (min-width: 750px) {
  /* top nav */
  .top-nav {
    flex-direction: row;
  }
  .top-nav li {
    margin: 0;
    width: auto;
  }
}

 <div class="top-nav">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>Category</a></li>
      <li><a>Recent</a></li>
      <li><a>All recipes</a></li>
    </ul>
  </nav>
</div>

原文由 joseph chauvin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的选择器范围有问题。您的 flex 根本无法管理您的导航项布局。您将 CSS 应用于导航容器而不是菜单项容器。即使它显示为一列，这也不归功于 flex 属性。看下面可能对你有帮助：

关键部分是：

 .top-nav ul {
  display: flex;
  flex-direction: row;
}

 .top-nav li {
  list-style-type: none;
  font-size: 22px;
  border: 2px solid #333;
  width: 80%;
  padding: 0;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 2px 2px 2px #333;
}

.top-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.top-nav ul {
  padding: 0;
  margin: 0;
}

@media (min-width: 750px) {

  /* top nav */

  .top-nav {
    flex-direction: row;
  }

  .top-nav ul {
	 display: flex;
  	 flex-direction: row;
  }

  .top-nav li {
    margin: 0;
    width: auto;
  }

 <div class="top-nav">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>Category</a></li>
      <li><a>Recent</a></li>
      <li><a>All recipes</a></li>
    </ul>
  </nav>
</div>

原文由 Hanif 发布，翻译遵循 CC BY-SA 4.0 许可协议