Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| align-items | フレックスアイテムの行内での交差軸方向の揃え方を指定 | stretch(初期値)・flex-start・flex-end・center・baseline |
CodePenで動作チェック
align-items・・・フレックスアイテムの交差方向の揃え方を指定
See the Pen プロパティ:align-items by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
プロパティ「align-items」の値によるそれぞれの挙動は以下でも確認できます。
align-itemsプロパティの値による挙動の違い
CSS Demo: align-items(mozilla.net)
※start・・・flex-start、end・・・flex-endです
フレックスアイテムの行内での交差軸方向の揃え方を指定するプロパティ
「align-items」はフレックスアイテムの行内での交差軸方向の揃え方の指定です。
値に「stretch」を指定するとアイテムどうしの高さを揃え、
「flex-start」を指定すると交差軸の上部(先頭)に揃え、
「flex-end」を指定すると交差軸の下部(末尾)に揃え、
「center」を指定すると交差軸の中央に揃え、
「baseline」を指定すると交差軸のベースラインに揃います。