space-betweenでアイテムを均等配置

space-betweenによる均等配置

justify-content: space-betweenはFlexboxで最も便利な配置値の1つです。最初のアイテムを先頭に、最後のアイテムを末尾に配置し、残りのスペースを隣接するアイテム間に均等に分配します。

CSSコード

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

仕組み

ブラウザはコンテナ内の合計空きスペース（コンテナ幅からすべてのアイテムの合計幅を引いたもの）を計算し、アイテム間のギャップに均等に分配します。N個のアイテムがある場合、N-1個のギャップがあります。

space-between vs space-around vs space-evenly

値	動作
space-between	アイテム間に均等なギャップ。端にスペースなし
space-around	各アイテムの周りに均等なスペース。端には半分のスペース
space-evenly	端を含むすべての場所に均等なスペース

実用上の考慮事項

• アイテムが1つだけの場合、space-betweenはflex-startのように動作します。
• アイテムが2つの場合、コンテナの両端に押し出されます。
• アイテムが折り返す場合、各行は独立して配分されます。

よくある落とし穴

折り返しグリッドの最後の行に他の行より少ないアイテムがある場合、space-betweenは不均一なギャップを作成します。一貫した間隔のグリッドレイアウトには、CSS Gridまたはgap付きの固定幅の使用を検討してください。