html - 随机数量的元素之间自动垂直间距以填充父级高度

Question

我正在寻找一种方法来自动填充 div 中 p 元素之间的空间，以便每个元素等距，第一个元素位于上边距，最后一个元素位于下边距。

这是一个 jsfiddle 示例:https://jsfiddle.net/5b7am7qu/

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

举个例子，div 设置了高度，怎么可能第一个段落位于上边距，底部段落位于下边距，然后每个其他 p 元素之间的垂直间距相等。

我无法为每个段落指定 ID 或类，但可以在父级上定义第一个/最后一个子级。

Answer 1

您可以使用 Flexbox 以及 justify-content: space- Between; 和 flex-direction: column; Fiddle 来完成此操作

.right {
  display: flex;
  border: 1px solid black;
  margin: 5px;
  width: 40%;
  height: 200px;
  flex-direction: column;
  justify-content: space-between;
}

p {
  margin: 0;
}

<div class="right">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>