列表项在我的网站的主导航是粘在一起使用flexbox ?我需要它们之间的空间

Question

<header class="main-header">
<h2 class="name">Student Name</h2>
<ul class="main-nav">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</header>
@media only Screen and (min-width: 768px){
.main-header,
.main-nav {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
}
}

我想让我的列表项在页面的中心内行，当我有一个768px的断点时彼此分开。然而，列表项粘在一起(端到端)。它们不是重叠的，只是粘在一起。

Answer 1

按如下方式添加宽度。

<style>
@media only Screen and (min-width: 768px){
.main-header,
.main-nav {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
}
.main-nav li
{
width:100px;
} 
}
</style>
<header class="main-header">
<h2 class="name">Student Name</h2>
<ul class="main-nav">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Portfolio</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</header>

Answer 2

设置你想要的宽度。因为你使用的是flex，所以把justify-content设置为space-between

@media only Screen and (min-width: 768px){
.main-header,
.main-nav {
display: flex;
}
.main-header {
flex-direction: column;
align-items: center;
}
.main-nav {
justify-content: space-between;
width: 400px;
}
}