最終更新日

align-itemsプロパティ

align-itemsは、フレキシブルボックス内でのボックスの揃え方を指定するプロパティです。

CSS3での変更点
・align-itemsは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
stretch display: flex;」か「display: inline-flex;」が指定された要素 なし
説明
flex-start ボックスの先頭をフレックスボックスの斜め軸に沿った先頭位置に揃えます。
flex-end ボックスの末尾をフレックスボックスの斜め軸に沿った末尾位置に揃えます。
center ボックスをフレックスボックスの斜め軸に沿って中央で揃えます。
baseline ボックスを基準となるフレックスボックスの斜め軸のベースラインに揃えて配置します。
stretch ボックスをフレックスボックスの斜め軸に沿って自動的に揃えます。(初期値
サンプルコード
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
参考文献:CSS Flexible Box Layout Module外部リンク
HOME