Боковая панель с использованием Flexbox: содержащиеся ссылки не распределяются должным образом

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>