最終更新日 2021年6月20日

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;

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。