html - 调整由 justify-content space-between 设置的元素之间的间距

Question

有没有办法减少justify-content:space-between中的空间？

元素之间的空间太大。

space-around 也不是解决方案，所以我想知道是否可以例如说我希望空间为 10px。

这是一个例子:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  border: 1px solid red;
}
.child:first-child {
  padding-bottom: 10px;
}

<div class="container">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
  </div>
  <div class="child">
    <p>The thing you want fixed to the bottom of the container.</p>
  </div>
</div>

http://jsfiddle.net/o3r40keu/5/

div 之间的空间太大。我希望它更小。

Answer 1

您看到的额外空间是由 min-height 属性引起的。尝试将其更改为低于 250 像素的值。例如:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 50px;       /*Changing from 250px -> 50px*/
  border: 1px solid red;
}