我的导航元素之间的空间无法适应视口

Question

我希望导航元素之间的空间根据视口进行拉伸或收缩，然后我对每个导航元素的宽度使用百分比度量，但由于显示的原因，它似乎不起作用：flex以下是代码：

/*CSS*/
<style type="text/css" media="screen">
.topbar{
display: flex;
justify-content: space-between;
padding: 30px;
background-color: lightgrey;
}

.topbar nav a{
display: inline-block;
width: 15%
}
.icon a{
margin:0px 10px;
}
</style>

<!-- /*HTML*/-->
<header  class="topbar">
<nav>
<a  href="#">Home</a>
<a  href="#">about</a>
<a  href="#">products</a>
<a  href="#">contact</a>
</nav>
<div class="icon">
<a href="#" >Sign up<i class="fab fa-facebook-f"></i></a>
<a href="#" >Log in<i class="fab fa-twitter"></i></a>
</div>
</header>
<!-- /header -->

因此，当我在顶栏导航中删除display:flex并添加display:inline-block时，空间会正确地适应视口，但我需要灵活性。

Answer 1

您需要将<nav>元素设置为flex box，将flex-grow设置为1，以填充所有可用空间。

.topbar{
display: flex;
justify-content: space-around;
padding: 0px;
background-color: lightgrey;
flex-wrap:wrap;
}

.topbar nav {
display:flex;
flex-grow:1;
justify-content: space-around;
position:relative;
}

.topbar nav a{
display:inline-block;
width: 15%;
}
.icon a{
margin:0px 10px;
}

<header  class="topbar">
<nav>
<a  href="#">Home</a>
<a  href="#">about</a>
<a  href="#">products</a>
<a  href="#">contact</a>
</nav>
<div class="icon">
<a href="#" >Sign up<i class="fab fa-facebook-f"></i></a>
<a href="#" >Log in<i class="fab fa-twitter"></i></a>
</div>
</header>

Answer 2

基本上，当您在顶部导航栏a上使用display: flex时，您会使每个a元素使用显示flex。您可以为链接添加一个额外的容器，并在容器上使用flex。或者，如果您想在每个a元素上使用flex，请使用inline-flex

.topbar{
display: flex;
justify-content: space-between;
padding: 30px;
background-color: lightgrey;
}
.topbar nav a{
display: inline-flex;
/*width: 15%;*/
}
.icon a{
margin:0px 10px;
}