Панель навигации CSS не выравнивается вправо с помощью Flex
Я пытаюсь «сгибать» с помощью CSS. Я не могу заставить панель навигации двигаться вправо. Я часами пытался использовать маржу, менять дисплеи, использовать float. Он не сдвинется с середины ... Извините, я все еще учусь
Я вставил ссылку на свой codepen, чтобы показать вам лучшую картину:
https://codepen.io/Saharalara/pen/pGyQWZ
HTML
<div id = "page-wrapper">
<header>
<div class = "logo">
<img id = "header-img" src = "https://upload.wikimedia.org/" alt = "Minnie Pic">
<span id = "logo-name">Minnie & Friends Inc</span>
</div>
<nav id = "nav-bar">
<ul id = "nav-ul">
<li class = "nav-link"><a href = "#stories">Stories</a><li>
<li class = "nav-link"><a href = "#toys">Toys</a><li>
<li class = "nav-link"><a href = "#suscribe">Suscribe</a></li>
</ul>
</nav>
</header>
<body>
<container id = "container1">
<section>
<h1 id = "stories">Minnie & Friends Stories</h1>
<p>
<a href = "#"> Here</a> you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang and they go on
many adventures.
</p>
<section>
<iframe id = "video" height = "180" src = "https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder = "1" allowfullscreen ></iframe>
</section>
<h2 id = "toys">Minnie & Friends Toys</h2>
<p>
<a href = "#">Here</a> you will also find many of your favourite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id = "suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>
CSS
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}
Ответы 3
Исправить 1
Лучший способ исправить это (для меня) — управлять макетом на уровне flex-контейнера (родителя). Это просто и декларативно.
header {
…
justify-content: space-between;
}
Исправить 2
Другой способ — добавить flex-grow: 1 к вашему #nav-bar.
#nav-bar {
…
flex-grow: 1;
}
В этом случае установка flex-grow на 1 сообщает элементу, что он должен занимать доступное пространство в своем гибком контейнере.
Исправить 3
Нестандартным способом было бы добавить левое автоматическое поле к #nav-bar, эффективно сдвинув его вправо настолько, насколько это возможно.
#nav-bar {
…
margin-left: auto;
}
поскольку ваш заголовок имеет свойство display: flex, его дочерние элементы действуют как flex-элементы.
Поэтому, если вы хотите переместить весь .nav-bar вправо, вы должны установить margin-left: auto в .nav-bar, чтобы этот элемент был сдвинут вправо.
Означает, что .nav-bar будет иметь как можно больший запас без разрыва на новой строке слева, поэтому элемент будет двигаться вправо.
Большое спасибо. Это было действительно полезно :)
Поскольку элемент Header является контейнером, просто добавьте justifi-content: space-between; и это заставит элементы двигаться влево и вправо. Другой способ — поставить position: absolute; справа: 0; в контейнер навигационной панели, но первый способ чище.
Спасибо большое за помощь :)
Большое спасибо, Энди. Я использовал первый, и он работал! Также оцените 3 разных варианта. Очень помогает :)