Align Self（align-self）プロパティ

最終更新：2026-09-13

align-self Align Self（align-self）プロパティ

align-self プロパティは単一のフレックスアイテムの交叉軸方向の配置を設定し、コンテナの align-items の既定値を上書きします。初期値は auto で、コンテナの align-items の値を継承します。これにより、他のアイテムとは異なる配置（たとえば他が上揃えのときに 1 つのアイテムだけ中央揃え）ができ、ナビゲーションバーやカードレイアウトで非常に便利です。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

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

⚙️ 値

値	タイプ	説明
`auto \| normal \| stretch \| flex-start \| flex-end \| center \| baseline`	キーワード	単一アイテムの交叉軸方向の配置

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
align-self	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： align-self: auto はコンテナの align-items 設定を継承します。アイテムを既定の配置に戻すには、単に align-self: auto を設定してください。

重要： align-self が効果を発揮するのはフレックスレイアウトとグリッドレイアウトのみです。フレックスボックスでは交叉軸上で、グリッドではブロック軸上で機能します。

❓ よくある質問

Qalign-self と align-items の違いは何ですか？

Aalign-items はフレックスコンテナに設定し、すべての子に同じ交叉軸方向の配置を与えます。align-self は単一のフレックスアイテムに設定し、そのアイテムの既定の配置を上書きします。align-self 自身の既定値は auto で、コンテナの align-items を継承します。align-self は align-items より優先度が高く、他が既定のままで 1 つのアイテムだけを中央揃えしたい場合によく使われます。

Qalign-self: baseline はいつ使うべきですか？

Abaseline はすべてのアイテムをテキストのベースラインに揃え、フォントサイズが異なるときにより整然と見えます。たとえばナビゲーションバーに大きなタイトルと小さなメニュー項目が混在するときや、タイムラインで日付が説明の横に並ぶとき、align-self: baseline は center や flex-end よりもテキストのベースラインを正確に揃えます。アイテムが複数行に折り返した場合、ベースラインは行ごとに適用され、これは混在コンテンツのカードを行単位で揃える場合に通常望ましい動作です。

Qflex-direction が column のとき、align-self はどの方向を制御しますか？

Aalign-self は常に交叉軸上で作用します。主軸が row のとき交叉軸は垂直なので、垂直位置を制御します。column に切り替えると、交叉軸は水平になり、align-self は代わりに水平位置を制御します。同じ考え方はグリッドにも当てはまり、align-self はブロック軸（横書きモードでは垂直方向）上で機能します。どちらの方向かを見極めるには、まず flex-direction を確認してください。交叉軸は常に主軸に垂直です。