使用弹性框的侧边栏:包含的链接未正确展开

Question

我正在尝试使用flexbox制作侧面导航栏。侧边栏看起来不错，但我希望包含的链接分散并占据屏幕的整个左侧。我尝试使用填充来执行此操作，但最终会在末尾留下一个空白。有什么想法吗？

body {
margin: auto 0;
}
#navbar {
display: flex;
flex-direction: column;
border: solid;
background: grey;
height: 900px;
width: 200px;
text-align: center;
}
.nav-link {
text-decoration: none;
border: solid;
padding: 80px;
}

<nav id="navbar">
<header>"A dissertation on fast food"</header>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
</nav>

Answer 1

由于您使用的是弹性容器，因此不要使用填充来分隔间距，因此请利用弹性功能。flex-grow属性可以将容器中的可用空间均匀分布到所有项。

body {
margin: auto 0;
}
#navbar {
display: flex;
flex-direction: column;
border: solid;
background: grey;
height: 900px;
width: 200px;
text-align: center;
}
.nav-link {
text-decoration: none;
border: solid;
/* padding: 80px; */
flex-grow: 1; /* equal distribution of free space */

/* for centering the text */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

<nav id="navbar">
<header>"A dissertation on fast food"</header>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
</nav>

Answer 2

您正在溢出。您定义了要900px的高度，对于每个框，您都有160px填充顶部/底部，因此800px填充，如果我们考虑边框加上内容加上标题，我们将有超过900px.

您可以使用flex:1来拉伸元素，然后依靠其中的 flexbox 使文本居中，而不是填充：

body {
margin: auto 0;
}
#navbar {
display: flex;
flex-direction: column;
border: solid;
background: grey;
height: 900px;
width: 200px;
text-align: center;
}
.nav-link {
text-decoration: none;
border: solid;
flex:1;
/*to center the text*/
display:flex;
align-items:center;
justify-content:center;
}

<nav id="navbar">
<header>"A dissertation on fast food"</header>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
<a class="nav-link" href="Steak">here</a>
</nav>