строка направления движения не работает: она все еще отображается в виде столбца

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

Попробуйте этот код Надеюсь, это сработает для вас!

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

Теперь flex-direction: column;работа в макс. ширине 750px и flex-direction: работа строки после 750px;

см. пример js fiddle здесь

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

Answer 3

Следующие изменения в вашем 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 4

Вы должны сделать своих <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 5

Вы должны подать flex-direction: row на ul

Answer 6

Проблема в вашей области селектора.Ваш 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>