CSS辞書

align-self

レイアウト・配置

FlexboxやGridの子要素が個別に縦方向(交差軸)の配置を上書きするプロパティです。親のalign-itemsを上書きし、特定のアイテムだけ異なる配置を実現できます。

構文

Syntax
align-self: auto | flex-start | flex-end | center | baseline | stretch

Tailwindでは

self-startalign-self: flex-start
self-centeralign-self: center
self-endalign-self: flex-end
self-stretchalign-self: stretch

コード例

1

align-self: flex-start;
実行結果
Item 1
align-self: start
Item 3
2番目のアイテムが上揃え

交差軸の開始位置に配置

2

align-self: flex-end;
実行結果
Item 1
align-self: end
Item 3
2番目のアイテムが下揃え

交差軸の終了位置に配置

3

align-self: stretch;
実行結果
Item 1
align-self: stretch
Item 3
2番目のアイテムが引き伸ばされる

交差軸方向に伸縮(デフォルト)

💡 TIPS

親のalign-itemsを個別の子要素で上書きできる。1つだけ異なる配置にしたい時に便利。

⚠️ よくある間違い

親がFlexboxまたはGridでないと効果がない。align-itemsとの違いを理解する(親 vs 子)。

🤖 AIがよく間違えるポイント

コンテナのalign-items(全員)に対する個別上書きがalign-self(自分だけ)です。AIは「1つだけ配置を変えたい」場面でコンテナ側をいじる遠回りをすることがあります。flexの交差軸・gridのブロック軸という対象軸の違い、stretchを解除して固有サイズに戻す用途も押さえておくと便利です。

💬 AIへの頼み方

flexの並びの中で1つのボタンだけ下端に揃えたい。align-selfで書いて

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

Baseline 広く利用可能
Chrome
29+
Firefox
20+
Safari
9+
Edge
12+