We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

align-self CSS プロパティはカレントの flex ラインの flex アイテムを、align-items の値を上書きして配置します。flex アイテムの cross-axis 側のマージンのいずれかが auto に設定されている場合、 align-self は無視されます。

初期値auto
適用対象flex items, including in-flow pseudo-elements
継承不可
メディアvisual
計算値auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. Its behavior depends on the layout model, as described for justify-self. Otherwise the specified value.
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については CSS flexible box の利用 をご覧ください。

構文

/* キーワード値 */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* グローバル値 */
align-self: inherit;
align-self: initial;
align-self: unset;

auto
親要素の align-items の値から計算します。または、親要素を持たない場合は stretch になります。
flex-start
flex アイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。
flex-end
flex アイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。
center
flex アイテムのマージンボックスは、cross-axis 上でライン内の中央に置かれます。アイテムの cross-size が flex コンテナより大きい場合は、両方向へ均等にはみ出します。
baseline
すべての flex アイテムは、ベースラインが一直線になるように配置されます。cross-start 側マージンの端とベースラインの間の距離が最大のアイテムが、ラインの cross-start の端に寄せられます。
stretch
アイテムのマージンボックスの cross-size が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。

形式構文

auto | flex-start | flex-end | center | baseline | stretch

仕様書

仕様書 状況 備考
CSS Box Alignment Module Level 3
align-self の定義
草案 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 21.0-webkit
36.0
20.0 (20.0) [1] 11.0 12.10 未サポート
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? 未サポート 12.10 未サポート

[1] バージョン 28 まで、Firefox は単一ラインの flexbox のみサポートしていました。Firefox 18 および 19 で flexbox サポートを有効にするには、about:config の設定 layout.css.flexbox.enabledtrue に変更します。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss, fscholz, teoli, ethertank
最終更新者: yyss,