align-self

概要

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

他のプロパティや詳細情報については 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

仕様書

ブラウザ実装状況

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

関連情報

• CSS flexible box の利用