CSS ・ Flexbox・Grid
align-self
1つのアイテムだけの交差軸方向の配置
Flexbox で、特定の子要素だけ垂直方向（交差軸方向）の位置を変えたいときに、その子要素に指定します。
01
サンプルコード
HTML
1<div class="flex">
2 <div class="item">1</div>
3 <div class="item">2</div>
4 <div class="item end">3</div>
5 <div class="item">4</div>
6</div>
CSS
1.flex {
2 display: flex;
3 align-items: flex-start;
4 gap: 8px;
5 height: 120px;
6 background: #f5efe6;
7}
8.item {
9 padding: 8px 16px;
10 background: #b68235;
11 color: #fff;
12}
13.end {
14 align-self: flex-end;
15}
02
実行結果
ブラウザでの表示親の align-items: flex-start で全員上揃え。3だけ align-self: flex-end で下に揃います
03
解説
align-self は、アイテム（子要素）の垂直方向の位置を指定するプロパティです。横並びのときは、上揃え・下揃え・中央揃えなどを子要素ごとに決められます。
親要素でも align-items で垂直方向の位置を指定できますが、子要素に align-self が指定されている場合は align-self が優先されます。全体は親の align-items で揃え、例外の1つだけを align-self で変える、という使い方をします。
親要素に高さの余白がなければ（親の高さとアイテムの高さが同じなら）、どの値を指定しても表示は変わりません。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
auto | 親要素の align-items の値を使用（初期値） |
flex-start | 子要素を上揃えで配置 |
flex-end | 子要素を下揃えで配置 |
center | 子要素を中央揃えで配置 |
baseline | 子要素をベースライン（文字の下端）に合わせて配置 |
stretch | 子要素を上下の余白を埋めるように配置 |
カードの「詳しく見る」ボタンだけ右下に置く
縦並び（column）のときは交差軸が横になるので、align-self: flex-end で右寄せになります。
HTML
1<div class="card">
2 <p>説明文が入ります。</p>
3 <a class="card__more" href="#">詳しく見る</a>
4</div>
CSS
1.card {
2 display: flex;
3 flex-direction: column;
4}
5.card__more {
6 align-self: flex-end;
7}
注意点
- 01align-self は子要素に書くプロパティです。親に書いても効きません。
- 02flex-direction: column のときは交差軸が横になるため、左右の位置を決めるプロパティになります。