align-items

概要

CSS align-items プロパティは、カレントの flex ラインの flex アイテムを、justify-content と同様の方法で配置します。ただし、こちらは垂直方向の配置を示します。

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

構文

/* cross-start に合わせる */
align-items: flex-start;

/* cross-end に合わせる */
align-items: flex-end;

/* cross-axis の中央に配置する */
align-items: center;

/* アイテムのベースラインに合わせる */
align-items: baseline;

/* アイテムを拡張する */
align-items: stretch;

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

値

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 が、幅や高さの制約の範囲内でラインと同じになるように拡張されます。

形式構文

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

仕様書

ブラウザ実装状況

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

[2] Internet Explorer 10-11 (Edge は除く) では、align-items: center; を設定した column 方向の flex アイテムで内容物が多い場合に、アイテムがコンテナの境界からはみ出します。詳しくは Flexbug #2 をご覧ください。

関連情報

• CSS flexible box の利用