Лучшие практики для вертикального выравнивания гибких элементов

Question

Мне любопытно узнать, как лучше расположить гибкие элементы по вертикали внутри div.Я хочу, чтобы у тега было больше места между его братьями и сестрами, поэтому я добавил значение flex-grow, равное 3. Но текст внутри элементов Flex не выровнен по центру по вертикали.

Почему нет?они вертикально ориентированы в центре?И есть ли лучший способ распределить их по вертикали?

Любопытно узнать лучшие практики от всех, даже если это другой путь.

#test {
  display: flex;
  padding: 20px;
  background: lightgreen;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 200px;
}
a {
  flex-grow: 3;
  background: red;
  justify-content: center;
  align-items: center;
}
span {
  flex-grow: 1;
  background: pink;
  justify-content: center;
  align-items: center;
}

<div id='test'>
  <span>stuff</span>
  <span>more stuff...</span>
  <a href='#'>link</a>
  <span>even more stuff</span>
</div>

Answer 1

Вы присваиваете свойства flexbox дочерним элементам, которые по-прежнему являются просто встроенными элементами (вместо элементов flexbox).

#test {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  
  padding: 20px;
  background: lightgreen;
  height: 200px;
}

#test > * {
  display: flex;
  align-items: center;
}

a {
  flex-grow: 3;
  background: red;
}
span {
  flex-grow: 1;
  background: pink;
}

<div id='test'>
  <span>stuff</span>
  <span>more stuff...</span>
  <a href='#'>link</a>
  <span>even more stuff</span>
</div>