显示:导航栏中父元素和子元素上的flex

Question

好的，这是使用flexbox制作web响应导航栏的代码。我的问题纯粹是出于好奇，因为我是一个新手，只是在学习html&css，并想了解其背后的逻辑：

为什么有必要为.navbar及其子级.navbar ul类提供display:flex？要显示flex，我们需要将其添加到父元素中，在本例中是nav。为什么它不能这样工作，为什么有必要将display:flex添加到其直接子项.navbar ul中？谢谢

<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0, 0.5);
position: sticky;
top: 0;
border: 3px dotted red;
}
.navbar ul {
display: flex;
margin: 20px 0px;
border: 3px dotted blue;
}

Answer 1

由于其灵活设置(水平和垂直(，.navbar在这种情况下使ul(即链接(居中。

在ul上，此处的flex设置仅确保li水平排列，而不一定是典型的flex示例。

我会添加一些细节，特别是列表项上的填充或边距(见下文(和ul上的list-style-type: none;，以隐藏li之前的默认点。

.navbar {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0, 0.5);
position: sticky;
top: 0;
border: 3px dotted red;
}
.navbar ul {
display: flex;
margin: 20px 0px;
border: 3px dotted blue;
list-style-type: none;
}
.navbar li {
padding: 10px 20px;
}

<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</nav>