Warum schiebt display flex?
Hallo,
ich verstehe nicht warum die Icons, mit Display Flex, in diesem Fall ganz nach Rechts geschoben werden?
Ist ja gut weil ich ne Responsive Navbar bauen will, aber ich wills auch verstehen.
Code Html:
<div class="top-bar">
<span><ion-icon name="call-outline"></ion-icon>111 222 333</span>
<ul>
<li><a href=""><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href=""><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href=""><ion-icon name="logo-instagram"></ion-icon></a></li>
</ul>
</div>
Und das Css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "DM Serif Text", serif;
}
a, a:hover {
text-decoration: none;
}
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
}
Danke sehr.
LG
1 Antwort
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webentwicklung, Programmieren & Softwareentwicklung
Ist ganz einfach. Deine Flexbox besteht nur aus zwei Elementen:
- Dem SPAN mit 111 222 333
- Der Liste UL mit den Icons
Da du für justify-content mit space-between angegeben hast, dass zwischen Elementen der verfügbare Platz gelassen wird, steht SPAN ganz links und UL ganz rechts.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.
Weist du vielleicht noch warum sich die <ul> sobald man dem Logo "flex: 1;" gib, nach Recht verschiebt?
Danke
<nav>
<div class="logo">
<a href="#"><img src="logo.svg" alt="logo">Logo</a>
</div>
<div class="toggle">
<a href="#"><ion-icon name="menu-outline"></ion-icon></a>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Und diesem CSS:
nav{
background: #255;
padding: 5px 20px;
display: flex;
align-items: center;
}
.logo img{
width:60px;
margin-right: 10px;
}
nav a{
color: #fff;
}
nav a:hover {
color:aquamarine
}
.logo {
flex: 1;
}
.logo a{
display: flex;
}