Flexbox配置プロパティの違い

align-content と align-items の違いを日本語で解説

CSSのレイアウトにおいて、Flexboxを利用する際に頻繁に使用するプロパティであるalign-contentとalign-itemsは、どちらもアイテムの配置を制御しますが、その作用範囲が異なります。

align-content

• 値の例
  
  • flex-start: 行を容器の上端に合わせて配置します。
  • center: 行を容器の中央に配置します。
  • space-between: 行間に均等なスペースを配置します。
  • space-around: 行の両側と行間に均等なスペースを配置します。
  • stretch: 行の高さを容器に合わせて伸縮させます。
• 機能
  複数の行を容器内にどのように配置するかを制御します。
• 作用範囲
  Flex容器内の複数の行。

align-items

• 値の例
  
  • baseline: アイテムのベースラインを揃えます。
• 機能
  各アイテムを容器内のクロス軸（通常は垂直方向）にどのように配置するかを制御します。

• align-itemsは、各アイテムの配置を制御します。
• align-contentは、複数の行の配置を制御します。

例

.container {
  display: flex;
  flex-wrap: wrap; /* 複数行にする */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

この例では、align-content: center;を設定すると、複数の行が容器の中央に配置され、align-items: flex-end;を設定すると、各アイテムが容器の下端に合わせて配置されます。

例

.container {
  display: flex;
  flex-wrap: wrap; /* 複数行にする */
  align-content: center; /* 行を中央に配置 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

この例では、align-content: center;を設定することで、複数の行が容器の中央に配置されます。

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

.item:nth-child(odd) {
  align-self: flex-end; /* 奇数番目のアイテムを下端に配置 */
}

この例では、align-self: flex-end;を設定することで、奇数番目のアイテムが容器の下端に配置されます。

CSS Grid Layout

• 代替プロパティ
  
  • justify-content: グリッドアイテムをグリッドトラックに沿って配置します。
  • align-items: グリッドアイテムをグリッドラインに沿って配置します。
  • align-content: グリッドトラック間のスペースを制御します。
• 特徴
  より柔軟なレイアウトが可能で、複雑なグリッド構造を構築できます。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  justify-content: center; /* グリッドアイテムを中央に配置 */
  align-items: center; /* グリッドアイテムを中央に配置 */
}

CSS Table Layout

• 代替プロパティ
  
• 特徴
  テーブル形式のレイアウトに適しています。

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
</table>

JavaScriptによる直接操作

• 方法
  
• 特徴
  より細かい制御が可能ですが、コード量が増えます。

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.style.top = '50%';
  item.style.transform = 'translateY(-50%)';
});