时间戳

首页 > 解决方案 > flex-direction：行不工作；它仍然显示为一列

html - flex-direction：行不工作；它仍然显示为一列

问题描述

我有一个导航栏，我想在小屏幕上显示为一列，在桌面屏幕尺寸上显示为一行。我的问题是我不知道为什么“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>

标签： htmlcssflexbox

解决方案

您的选择器范围有问题。您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>

推荐阅读