ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】align-selfの使い方を解説！align-itemsとの違いは？

【CSS】align-selfの使い方を解説！align-itemsとの違いは？

HTML/CSS

2022/05/27

2023/05/08

align-self はflexアイテムの配置を個別に指定するプロパティです。align-self を使用すれば、flexアイテムの配置を全体的に統一しながら特定のflexアイテムの配置のみを変更できます。

この記事ではalign-selfの使い方を解説します。

この記事で身につく内容

align-self とは
align-self の使い方
align-self と align-items の違い

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

align-selfとは
align-selfの使い方
align-selfとalign-itemsの違い
まとめ

align-selfとは

align-self はflexアイテムの配置を個別に指定するプロパティです。上揃え・下揃え・中央揃えや、ベースライン（テキストの下部）で揃える指定、親要素の高さに則って伸縮する指定などができます。

align-self の配置は、flex-direction の値によって方向が変わります。flex-direction: row; のときは縦方向、flex-direction: column; のときは横方向での配置となります。

flex-direction の値によるflexアイテムが並ぶ向きのことを主軸、そして主軸に交わる方向のことをクロス軸（交差軸）といいます。主軸とクロス軸の概念はflexboxを使いこなすうえで重要です。

主軸・クロス軸については、flex-direction を学習するとわかりやすくなります。こちらの記事で flex-direction の使い方、および主軸・クロス軸について詳しく解説しています。ぜひ併せてお読みください。

【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

align-selfの使い方

align-self の基本形は以下のとおりです。

.flexbox {
  display: flex;
}

.flex-item {
  align-items: 値;
}

align-self を使用するときは、親要素に display: flex; を、子要素に align-self をそれぞれ指定します。

align-self で使用できる値は以下のとおりです。

align-self で使用できる値

auto（初期値）: 親要素の align-items の値に従う
flex-start : 親要素の左端に配置
flex-end : 親要素の右端に配置
center : 親要素の中央に配置
baseline : flexアイテムのベースライン（テキストの下端）に配置
stretch : 親要素の横幅に合わせてflexアイテムを伸縮

それぞれの値の使い方は次の項目で詳しく解説します。

以下は基準となるHTMLとCSSの記述です。

auto

align-self: auto; は、flexアイテムの配置が親要素の align-items の値を継承する指定です。

以下が記述例と出力結果です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
  align-items: center;
  height: 100px;
}

.flex-item {
  color: #fff;
  width: 100px;
  text-align: center;
}

.item01 {
  background-color: red;
}

.item02 {
  background-color: blue;
  align-self: auto;
}

.item03 {
  background-color: green;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}

flex-start

align-self: flex-startは、flexアイテムを親要素の上部に配置する指定です。

以下が出力結果と記述例です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
  align-items: center;
  height: 100px;
}

.flex-item {
  color: #fff;
  width: 100px;
  text-align: center;
}

.item01 {
  background-color: red;
}

.item02 {
  background-color: blue;
  align-self: flex-start;
}

.item03 {
  background-color: green;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}

flex-end

align-self: flex-end;は、flexアイテムを親要素の下部に配置する指定です。

以下が記述例と出力結果です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
 <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
  align-items: center;
  height: 100px;
}

.flex-item {
  color: #fff;
  width: 100px;
  text-align: end;
}

.item01 {
  background-color: red;
}

.item02 {
  background-color: blue;
  align-self: flex-start;
}

.item03 {
  background-color: green;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}

center

align-self: center;は、flexアイテムを親要素の中央に配置する指定です。解説のためここでは親要素のalign-itemsをflex-startに指定します。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
  align-items: flex-start;
  height: 100px;
}

.flex-item {
  color: #fff;
  width: 100px;
  text-align: center;
}

.item01 {
  background-color: red;
}

.item02 {
  background-color: blue;
  align-self: center;
}

.item03 {
  background-color: green;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}

baseline

align-self: baseline;は、flexアイテムをベースライン（テキストの下部）を基準に配置する指定です。

以下が出力結果と記述例です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
  align-items: center;
  height: 100px;
}

.flex-item {
  color: #fff;
  width: 100px;
  text-align: end;
}

.item01 {
  background-color: red;
}

.item02 {
  background-color: blue;
  align-self: baseline;
}

.item03 {
  background-color: green;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}

stretch

align-self: stretchは、flexアイテムを親要素の高さに合わせて伸縮させる指定です。

以下が出力結果と記述例です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
  <div class="flex-item item04">④</div>
  <div class="flex-item item05">⑤</div>
</div>

.flexbox {
  display: flex;
  align-items: center;
  height: 100px;
}

.flex-item {
  color: #fff;
  width: 100px;
  text-align: end;
}

.item01 {
  background-color: red;
}

.item02 {
  background-color: blue;
  align-self: stretch;
}

.item03 {
  background-color: green;
}

.item04 {
  background-color: black;
}

.item05 {
  background-color: purple;
}