Sponsored Link
プロパティ・値の解説
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| justify-content | フレックスアイテムの主軸方向の揃え方を指定 | flex-start(初期値)・flex-end・center・space-between・space-around |
CodePenで動作チェック
justify-content・・・フレックスアイテムの主軸方向の揃え方を指定
See the Pen プロパティ:justify-content by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
プロパティ「justify-content」の値によるそれぞれの挙動は以下でも確認できます。
justify-contentプロパティの値による挙動の違い
CSS Demo: justify-content(mozilla.net)
フレックスアイテムの主軸方向の揃え方を指定するプロパティ
「justify-content」はフレックスアイテムの主軸方向の揃え方を指定するもので、
フレックスアイテムをどこからどのように描画するのかを指定します。
おそらく「justify-content」プロパティはフレックスボックスのプロパティの中で最も難解で、
この「justify-content」を理解できるかどうかがひとつのラインになります。
値に「flex-start」を指定すると主軸起点に揃え、左端から配置され、
「flex-end」を指定すると主軸終点に揃え、右端から配置され、
「center」を指定すると主軸中央に揃え、中央から配置されます。
また「space-between」を指定すると主軸幅全体に揃え、余白をもって等間隔で配置され、
「space-around」を指定すると主軸幅全体に揃え、余白をもって等間隔かつ起点・終点との間にも間隔付きで配置されます。
なお「space-between」の指定で余白が発生しない場合はflex-startと同様の表示で、
「space-around」の指定で余白が発生しない場合はcenterと同様の表示になります。