Я учусь использовать 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)">Δ</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
@ Дай, изначально так было, потому что все они показывали display:block
в инструментах разработчика F12
, и я пытался понять, почему - я просто еще не зашел и не почистил его.
Поскольку вы делаете #initial
гибким, а по умолчанию для flex-direction установлено значение row
, ваше меню выравнивается с вашим телом. Если вы хотите меню и тело в 2 строки, добавьте ниже css:
#initial{
flex-direction: column;
}
Работал отлично. Просто нужно было также добавить столбец в «Тело», которого не было в моем первоначальном вопросе, поэтому я не ожидал, что вы это сформулируете. Спасибо за помощь!
Почему у вас в каждом правиле сокращенная запись
flex: 1;
? Мне это кажется карго-культовым программированием, особенно если учесть, что вы используете сокращенные версии всех остальных гибких правил. И почему вы меняете свойства макета в правиле:hover
? Вообще говоря, в правилах:hover
должны быть изменены только свойства цвета/фона/эффектов.