フレックス
align-self その子だけ交差軸の寄せを変える
意味
親の align-items に対して、その子だけ交差軸の位置を変える場合に使います。1つだけ上端、1つだけ伸ばす、といった例外向きです。
親要素に flex がないと効きません。grid の子でも、マスの中の位置を個別に変えられます。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<div class="row">
<span>中央</span>
<span class="end">下だけ</span>
</div>.row {
display: flex;
align-items: center;
min-height: 5rem;
gap: 0.4rem;
background: #f3f1ec;
padding: 0.4rem;
}
.row > span {
background: #efeef8;
padding: 0.3rem 0.6rem;
}
.end {
align-self: flex-end;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 29〜 |
| Firefox | 20〜 |
| Safari | 9〜 |
| Edge | 12〜 |
| Chrome Android | 29〜 |
| Safari iOS | 9〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)