Элементы внутри flex-контейнера «форматируются» в соответствии с компоновкой сетки CSS

Question

У меня могут быть проблемы с пониманием того, как CSS-сетки и flex работают вместе.У меня есть верхняя панель навигации, которая охватывает весь экран, область основного содержимого, боковая панель и нижний колонтитул, которые я сделал с помощью сеток CSS.

Верхняя панель навигации отображается как flex, где логотип и меню элементов div отображаютсярасположены (flex-direction: column) вертикальноВ мобильном представлении я хотел сделать так, чтобы логотип и меню элементов div (flex-direction: column) располагались горизонтально.

Вот в чем проблема:

HTML:

  <header id = "main-header">
     <div class="container nav-flex">
        <div class="site-logo">
          <div>
            beautiful blog
          </div>
        </div>
        <div class="main-header-nav">
          <div>hello</div>
            <label for="toggle">&#9776;</label>
            <div class="menu-nav">              
            </div>
        </div>
     </div>
  </header>

CSS:

#main-header { 
  grid-area: main-header; 
  text-align: center; 
}

.main-area {
  grid-area: ct-main;
}

.side-area {
  grid-area: ct-side;
}

.footer-area {
  grid-area: ft;
}

.nav-flex {
  background: #eee;
  display: flex; 
  flex-direction: row; 
}

.main-header-nav {
  display: flex;
  flex-direction: row; 
  align-items: center; /*vertically centers items*/
  justify-content: center; /*centers items*/

}

.site-logo { 
  flex: 3; 
  background: #eee; 
}

.main-header-nav { 
  flex: 1;
  background: #ddd; 
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "main-header main-header"
    "ct-main ct-side"
    "ft ft";
  max-width: 960px;
  margin: 0 auto;
}


@media only screen and (max-width:500px) { 
  .nav-flex {
    flex-direction: row; 
   }

}

Причина, по которой я поставил .container, заключалась в том, что# Фон основного заголовка должен занимать весь экран, в то время как все содержимое контейнера должно быть 960 пикселей.

Проблема: То, что происходит, заключается в том, что верхнее навигационное меню будет лежать только горизонтально, а логотип div и меню занимают интервал 2fr и 1fr, как показано в моей сетке CSSсоответственно - вместо # main-header родительского div, охватывающего все, что позволяет мне размещать flex div так, как я хочу.

Когда я удаляю код сетки CSS в .container, он отлично работает.

Я относительно новичок в сетках CSS и Flexbox, но, насколько я понимаю, CSS-сетки - это способ задать макет 2-мерным образом, а Flex должен расположить контент определенным образом внутри своего контейнера Flex.

Что я получаю (1. развернутый экран, 2. просмотр мобильного экрана): развернутый просмотр

просмотр мобильного экрана

Чего я пытаюсь достичь (3. развернутый экран, 4. вид мобильного экрана): развернутый вид вид мобильного экрана

Прошу прощения, если этовопрос сформулирован запутанно.Сейчас 2 часа ночи, и я не могу понять это. На всякий случай, я действительно запутался

Большое вам спасибо!

Answer 1

Вы хотите, чтобы ваш логотип и меню отображались горизонтально в мобильном представлении, но вертикально на рабочем столе.

При использовании flexbox вы определяете одно направление, в котором элементы будут перемещаться независимо от размера экрана.Различные результаты возникают, когда элементы начинают наматываться (flex-wrap) на меньшие экраны.Они переносятся, если для них недостаточно места, чтобы поместиться в один ряд или столбец.

В вашем примере ваши элементы помещаются в div на всех возможных экранах, поэтому им не нужно переносить.Если вы хотите, чтобы они переносились на меньшие экраны, вы должны установить высоту для ваших предметов и контейнера и изменить свой CSS следующим образом:

.nav-flex {
  background: #eee;
  display: flex; 
  flex-direction: column;
  flex-wrap: wrap;
}

Затем попробуйте поиграть с высотой вашего контейнера и вашегоПредметы.Посмотрите на этот пример: https://jsfiddle.net/fte69gd0/ Уменьшая высоту экрана, дочерние элементы выстраиваются в ряд, потому что они больше не помещаются в контейнер.В этом примере я использую vh и px в качестве измерения высоты, но наверняка есть разные варианты.

Хотя я бы, вероятно, вообще не использовал flexbox и взглянул на правило css media.