随机元素之间的自动垂直间距以填充父高度

Question

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

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

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

比如说div被设置了高度，第一段怎么可能在上边距，下段在下边距，然后每个其他p元素之间的垂直间距是等距的。

我不能给每个段落一个 ID 或类，但可以在父级上定义第一个/最后一个子级。

Answer 1

您可以为每个p 设置一个顶部和底部边距，以确保它们的上下具有相同的空间。您无需区分 :first-child 和 :last-child，因为边距会为所有段落元素自动生成。

.container {
  width: 500px;
  margin: 15px auto;
}
.container div {
  display: table-cell;
  padding: 5px;
}
.left {
  width: 60%;
  background-color: red;
}
.right {
  width: 40%;
  background-color: green;
}
p {
  margin: 10px 0;
}

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="right">
    <p>
      Paragraph 1
    </p>
    <p>
      Paragraph 2
    </p>
    <p>
      Paragraph 3
    </p>
  </div>
</div>

Answer 2

您可以使用带有justify-content: space-between; 和flex-direction: column; Fiddle 的Flexbox 来做到这一点

.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>