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

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

12

css flexbox flex-direction

Источник

user10697830 07 дек '18 в 04:38

6 ответов

Другие вопросы по тегам css flexbox flex-direction

user7289067 07 дек '18 в 04:51 2018-12-07 04:51 · Answer 1 · 2018-12-07 04:51

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

user8899014 07 дек '18 в 04:54 2018-12-07 04:54 · Answer 2 · 2018-12-07 04:54

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

user10185299 10 дек '18 в 09:35 2018-12-10 09:35 · Answer 3 · 2018-12-10 09:35

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

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

user3550318 07 дек '18 в 04:54 2018-12-07 04:54 · Answer 4 · 2018-12-07 04:54

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

0

Источник

user3550318 07 дек '18 в 04:54

user1456913 07 дек '18 в 04:51 2018-12-07 04:51 · Answer 5 · 2018-12-07 04:51

Вы должны подать заявку flex-direction: row в ul

0

Источник

user1456913 07 дек '18 в 04:51

user6345677 07 дек '18 в 06:11 2018-12-07 06:11 · Answer 6 · 2018-12-07 06:11

Теперь 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>