HTML一覧CSS一覧CSS一覧

フレックス

align-self その子だけ交差軸の寄せを変える

重要度3 / 5

意味

親の align-items に対して、その子だけ交差軸の位置を変える場合に使います。1つだけ上端、1つだけ伸ばす、といった例外向きです。

親要素に flex がないと効きません。grid の子でも、マスの中の位置を個別に変えられます。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<div class="row">
  <span>中央</span>
  <span class="end">下だけ</span>
</div>
CSS
.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;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome29〜
Firefox20〜
Safari9〜
Edge12〜
Chrome Android29〜
Safari iOS9〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)