Почему новая строка НЕ ​​начинается после завершения flexbox?

Я учусь использовать flex и только начал сталкиваться с проблемами для после, flexbox завершен...

#initial {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    align-items: center;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
}

  #initial .menu {
      display: flex;
      flex: 1;
      justify-content: space-evenly;
      align-items: center;
      margin: 15px auto 15px auto;
      width: 1100px;
      border: 1px solid rgba(245, 245, 245, 0.699);
      border-radius: 50px;
      line-height: 2rem;
      font-size: 1.1rem;
      overflow: hidden;
  }

    #initial .menu .menuItem {
        display: flex;
        flex: 1;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        text-align: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;
    }

    #initial .menu .menuItem:hover {
        background-color: #FDB000;
        color: black;
        cursor: pointer;
        display: flex;
        flex: 1;
        text-align: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;
    }
<div id = "initial">
    <div class = "menu">
        <div id = "initialMenuHeader" class = "menuItem" onclick = "menuCollapsable(this)">&Delta;</div>
        <div id = "initialMenuHVQ" class = "menuItem" onclick = "initialHVQ()">Hivecoin</div>
        <div id = "initialMenuRVN" class = "menuItem" onclick = "initialRVN()">Ravencoin</div>
        <div id = "initialMenuAVN" class = "menuItem" onclick = "initialAVN()">Avian</div>
    </div>
    <div class = "body">
        <h1>NAME OF POOL GOES HERE</h1>
        <p class = "intro">¡Intro crap will go here!</p>
    </div>
</div>

В нынешнем виде мой .menu выглядит как это. Обратите внимание, что изображение не подвергалось цензуре и содержит ругательства.

Все, что я мог найти в Интернете, предполагает, что когда flex-box будет завершено, он должен вернуться к нормальному потоку (например, не плавать).

Пожалуйста, дайте мне знать, что я делаю неправильно и/или упускаю.

JSFiddle моего кода (добавлены некоторые вещи, которые я не включил выше, например body для background-color и color

Почему у вас в каждом правиле сокращенная запись flex: 1;? Мне это кажется карго-культовым программированием, особенно если учесть, что вы используете сокращенные версии всех остальных гибких правил. И почему вы меняете свойства макета в правиле :hover? Вообще говоря, в правилах :hover должны быть изменены только свойства цвета/фона/эффектов.

Dai 08.04.2022 17:05

@ Дай, изначально так было, потому что все они показывали display:block в инструментах разработчика F12, и я пытался понять, почему - я просто еще не зашел и не почистил его.

jpgerb 08.04.2022 17:08
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
32
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку вы делаете #initial гибким, а по умолчанию для flex-direction установлено значение row, ваше меню выравнивается с вашим телом. Если вы хотите меню и тело в 2 строки, добавьте ниже css:

#initial{
   flex-direction: column;
}

Работал отлично. Просто нужно было также добавить столбец в «Тело», которого не было в моем первоначальном вопросе, поэтому я не ожидал, что вы это сформулируете. Спасибо за помощь!

jpgerb 08.04.2022 17:09

Другие вопросы по теме