CSS プロパティ box-pack：Flexbox 要素の主軸方向の配置を柔軟に制御する

CSS プロパティ box-pack

この文章では、CSS プロパティ `box-pack` (現在は `justify-content` に名称変更されています) について詳しく解説し、Flexbox コンテナ内の要素を主軸方向に正確に配置する方法を学びます。

1. box-pack とは？

`box-pack` プロパティは、Flexbox レイアウトにおいて、フレックスコンテナ内のアイテムを主軸方向にどのように配置するかを指定するために使用されます。

`box-pack` は、現在では `justify-content` に名称が変更されていますが、ブラウザは依然として古い名前もサポートしています。しかし、新しい仕様に準拠するため、そしてコードの可読性を高めるためにも、`justify-content` を使用することを強くお勧めします。

2. justify-content プロパティ値の詳細

`justify-content` プロパティでは、以下の値を使用できます。

値	説明
`flex-start` (デフォルト)	アイテムを主軸の始点に揃えます。
`flex-end`	アイテムを主軸の終点に揃えます。
`center`	アイテムを主軸の中央に揃えます。
`space-between`	アイテム間を均等に配置し、最初と最後のアイテムをそれぞれコンテナの始点と終点に揃えます。
`space-around`	アイテムの両側に均等なスペースを配置し、最初と最後のアイテムはコンテナの始点と終点からアイテム間のスペースの半分だけ離れます。
`space-evenly`	アイテム間、およびアイテムとコンテナの始点・終点との間のスペースをすべて均等にします。

2.1. flex-start

`flex-start` は `justify-content` のデフォルト値です。アイテムは主軸の始点に配置されます。


<html>
<head>
<style>
.container {
  display: flex;
  justify-content: flex-start;
  width: 500px;
  height: 100px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

2.2. flex-end

`flex-end` はアイテムを主軸の終点に配置します。


<html>
<head>
<style>
.container {
  display: flex;
  justify-content: flex-end;
  width: 500px;
  height: 100px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

2.3. center

`center` はアイテムを主軸の中央に配置します。


<html>
<head>
<style>
.container {
  display: flex;
  justify-content: center;
  width: 500px;
  height: 100px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

2.4. space-between

`space-between` はアイテム間を均等に配置し、最初と最後のアイテムをそれぞれコンテナの始点と終点に揃えます。


<html>
<head>
<style>
.container {
  display: flex;
  justify-content: space-between;
  width: 500px;
  height: 100px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

2.5. space-around

`space-around` はアイテムの両側に均等なスペースを配置し、最初と最後のアイテムはコンテナの始点と終点からアイテム間のスペースの半分だけ離れます。


<html>
<head>
<style>
.container {
  display: flex;
  justify-content: space-around;
  width: 500px;
  height: 100px;
  border: 1px solid black;
}

.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>