SoyaBlog

これを見れば解決しそうや

HOME>CSS>align-selfについて解説
ブログ投稿日時：
ブログ更新日時：
align-selfについて解説

align-selfについて解説

  1. align-self とは
  2. align-self の指定方法
  3. 今回のまとめ
1.

align-self とは

align-self は親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定できるプロパティです。

こちらは align-items と全く同じ機能ですが、align-items は親要素に対して指定し、align-self は子要素に対して指定するものなので、それぞれを使い分けれるようにしましょう。

また、align-items と align-self を同時に指定した場合は子要素に指定する align-self が優先して適用されます。

2.

align-self の指定方法

それでは align-self の指定方法を見ていきましょう。

align-self で使える値は下記の6つです。

auto（初期値）… 親要素の align-items の値を継承

stretch … 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置

flex-start … 親要素の開始位置から上揃えで配置

flex-end … 親要素の終了位置から下揃えで配置

center … 中央揃え

baseline … ベースラインで揃える

それではそれぞれの指定方法と表示を見ていきましょう。

align-self: auto; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　align-items: flex-start;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: auto;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: auto; を指定すると親要素の align-items の値を継承します。

align-self: stretch; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: stretch;
　height: auto;
}
HTMLとCSSの表示
1
2
3

上記のように align-items: stretch; を指定すると親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置します。

align-self: flex-start; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: flex-start;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: flex-start; を指定すると親要素の開始位置から上揃えで配置します。

align-self: flex-end; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: flex-end;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: flex-end; を指定すると親要素の終了位置から下揃えで配置します。

align-self: center; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: center;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: center; を指定すると中央揃えで配置します。

align-self: baseline; の指定方法と表示

<div class="items">
  <div class="item">1</div>
  <div class="item align-self">2</div>
  <div class="item">3</div>
</div>
.items {
　display: flex;
　gap: 16px;
　height: 200px;
}

.item {
　width: calc((100% - 16px * 2) / 3);
　height: 100%;
　background-color: #ff0000;
　color: #fff;
}

.align-self {
　align-self: baseline;
　height: 50px;
}
HTMLとCSSの表示
1
2
3

上記のように align-self: baseline; を指定するとベースライン(それぞれの文字の最下部を基準)で揃えて配置します。

3.

今回のまとめ

この記事では align-self について解説しました。

align-self は親要素に空きスペースがあった場合、子要素を垂直方向のどの位置に配置するかを指定できるプロパティです。

align-items と全く同じ機能ですが、align-items は親要素に対して指定し、align-self は子要素に対して指定するものなので、それぞれを使い分けれるようにしましょう。

align-items と align-self を同時に指定した場合は子要素に指定する align-self が優先して適用されるので注意が必要です。

最後までお読みいただきありがとうございます。