垂直对齐三个段落

Question

我正在尝试使用 justify-content 和 align-items 垂直对齐三个段落 - 一个在顶部，一个在中间，另一个在底部。请注意，三个段落位于 div 标记中。这个怎么做？我正在努力使它尽可能简短。

Answer 1

您可以使 div 灵活： https://codepen.io/hans-felix/pen/MWwdawm

.box {
  background: yellow;
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


<div class="box">
  <p class="top">Lorem Ipsum ...</p>

   <p class="middle">Lorem Ipsum ...</p>

   <p class="bottom">Lorem Ipsum ...</p>
</div>