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プロパティによって引き起こされています。 250px未満に変更してみてください。例：

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

Answer 2

relativeの優先エレメントの位置を指定し、マイナスのtopプロパティを使用して整列します。 https://jsfiddle.net/o3r40keu/24

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

.child:first-child { 
    padding-bottom: 10px; 
} 

.child:last-child { 
    position: relative; 
    top: -100px; 
} 

Answer 3

リテラルソリューション：フレックス項目のサイズを大きくします。

あなたの例のようにテキストが含まれていれば、最外の位置に最も外側のアイテムが配置されます。その間のスペースは、コンテナのサイズからフレックスのサイズアイテム。