我对HTML和CSS还比较陌生,目前正在编写菜单时遇到了一个问题。
我想使用嵌套的flexbox来创建菜单。它已经接近我想要的效果,但是出于某种我无法理解的原因,在子Flexbox内的justify-content
似乎并没有起作用...
以下是我的代码:
header {
display: inline-flex;
height: 90px;
align-items: center;
justify-content: flex-start;
}
.avatar {
display: inline-flex;
height: inherit;
width: 200px;
background-color: #00D717;
align-items: center;
justify-content: space-around;
}
.avatar h1 {
font-size: 13px;
text-transform: uppercase;
color: white;
}
.resteHeader {
display: inline-flex;
height: inherit;
justify-content: flex-start;
align-items: center;
}
.resteHeader nav {
display: inline-flex;
height: inherit;
justify-content: space-around;
align-items: center;
}
.resteHeader nav ul {
display: inline-flex;
height: inherit;
justify-content: space-between;
align-items: center;
}
<header>
<div class="avatar">
<img src="img/avatar.png">
<h1>Hoang Nguyen</h1>
</div>
<div class="resteHeader">
<nav>
<ul>
<li>
<a href="#">
<img src="img/silhouette.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/bulle.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/cloche.png" alt="">
</a>
</li>
</ul>
</nav>
<img class="logo" src="img/logo.png" alt="">
<form>
Type sor search
<input type="text">
<img src="img/loupe.png" alt="">
</form>
</div>
</header>
inline-flex
表示使容器的宽度与其内容一样宽。在inline-flex
容器上指定justify-content: space-around
是没有意义的,除非它也有一个宽度(而你的很多inline-flex
容器并没有)。 - Adam Jenkins