Question

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

HTML：

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

CSS：

.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;
  }

Answer 1

在CSS中更改解决方案

.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 {
 text-align: center;
  justify-content: center;
}

.top-nav ul 
{
    padding: 0;
    margin: 0;
    display: flex;
}

@media screen and (max-width: 480px) 
{

.top-nav ul 
{

   flex-direction:column;
}

  
  .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>

Answer 2

尝试此代码，希望它对您有用！

.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 ul{
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.top-nav {
  padding: 0;
  margin: 0;
}

@media only screen and (max-width: 750px) {
  /* top nav */
.top-nav ul { flex-direction: column; }
}
/* .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>

Answer 3

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

Answer 4

您必须将flex-direction: row应用于ul

Answer 5

您需要让<li>的孩子成为display: flex的父母。将您的top-nav类移动到<ul>，这应该可以完成。

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

这是我最喜欢的flexbox备忘单：https://yoksel.github.io/flex-cheatsheet/

Answer 6

现在flex-direction：column;在最大宽度750px和flex-direction上工作：行在750px之后工作；

see the js fiddle example here

.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 {
  
}

.top-nav ul {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

@media (max-width: 750px) {

  /* top nav */

  .top-nav ul{
    flex-direction: column;
  }

  .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>

flex方向行不起作用：仍显示为列

6 个答案: