使用Flexbox的侧边栏：包含的链接无法正确展开

Question

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

services.Configure<ApiBehaviorOptions>(options =>
{
    options.SuppressModelStateInvalidFilter = true;
})

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;
}

Answer 1

由于您使用的是flex容器，因此不要使用padding来间隔，请利用flex功能。 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>