Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

align-self

概要

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.
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

他のプロパティや詳細情報については 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
The definition of 'align-self' in that specification.
草案 最初の定義

ブラウザ実装状況

機能 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,