【CSS】align-selfの使い方を解説｜Flexbox・Grid対応

align-selfは、FlexboxやGridレイアウトにおいて、特定の子要素だけを別の位置に揃えたい場合に使える便利なCSSプロパティです。

親要素に影響されず、要素ごとに垂直方向の位置を調整できるため、柔軟なレイアウトに役立ちます。

本記事では、align-selfの基本的な使い方から、Flexbox・Gridそれぞれでの使用例を紹介します。

align-selfとは？

align-selfは、FlexboxやGridの子要素に個別で指定する垂直揃えのプロパティです。

親要素に設定されたalign-itemsを上書きする形で適用されます。

使用できる主な値

Flexboxでのalign-selfの使い方

Flexboxでは、親要素に display: flex; を指定し、子要素ごとに align-self を設定することで個別に位置を制御できます。

<div class="flex-container">
  <div class="item">A</div>
  <div class="item center">B</div>
  <div class="item">C</div>
</div>

.flex-container {
  display: flex;
  align-items: flex-start;
  height: 200px;
  background-color: #f0f0f0;
}

.item {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  margin: 5px;
}

.center {
  align-self: center; /* この要素だけ中央揃え */
}

この例では、全体は上端揃え（align-items: flex-start）ですが、2番目の要素だけが垂直中央に配置されます。

要素の高さが異なる場合の例

以下のように、要素の高さが異なる場合の挙動を見てみましょう。

まずはalign-selfを使っていない場合の表示例です。

この例では、親要素の高さをheightで固定していません。

<div class="flex-container">
  <div class="item">A</div>
  <div class="item center">B</div>
  <div class="item right">C</div>
</div>

.flex-container {
  display: flex;
  align-items: flex-start;
  background-color: #f0f0f0;
}

.item {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  margin: 5px;
}
.center {
  font-size: 30px;
}
  

次に、三つ目の要素にalign-selfを指定してみます。

<div class="flex-container">
  <div class="item">A</div>
  <div class="item center">B</div>
  <div class="item right">C</div>
</div>

.flex-container {
  display: flex;
  align-items: flex-start;
  background-color: #f0f0f0;
}

.item {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  margin: 5px;
}
.center {
  font-size: 30px;
}
.right {
  align-self: flex-end;
}

このように、各要素の高さが異なる場合に、使用できます。

Gridレイアウトでのalign-selfの使い方

Gridでも同様に、align-selfを子要素に指定することで垂直揃えを個別に調整できます。

<div class="grid-container">
  <div class="item top">1</div>
  <div class="item center">2</div>
  <div class="item bottom">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 150px;
  background-color: #e0f7fa;
}

.item {
  background-color: #0097a7;
  color: white;
  padding: 10px;
  margin: 5px;
}

.top {
  align-self: start;
}

.center {
  align-self: center;
}

.bottom {
  align-self: end;
}

この例では、3つの要素がそれぞれ上・中央・下に揃えられます。

align-itemsとの違い

align-selfを使うことで、部分的な調整が可能になります。

よくある使い方と注意点

• align-selfは個別の子要素に対して指定する。
• autoは親のalign-itemsの値をそのまま継承。
• 親要素がflexまたはgridでないと機能しない。
• align-selfでレイアウトが崩れる場合、高さなどの指定と併用するのが効果的。

まとめ

align-selfは、FlexboxやGridでの細かいレイアウト調整に役立つ重要なプロパティです。親のalign-itemsに縛られず、個別の要素に自由な配置を与えることができます。

デザインの自由度を上げるために、align-itemsとalign-selfを使い分けて、柔軟なUIを構築していきましょう。

参考サイト

• align-self – CSS: カスケーディングスタイルシート | MDN
• フレックスボックス – ウェブ開発の学習 | MDN