参考にさせて頂いたページ
MDN
その他の記事
はじめに
今回は、大雑把にいうと、main axis方向の余白の配分についてです。
- main-start側にflexアイテムを詰めて配置する
- main-end側にflexアイテムを詰めて配置する
- main-start、main-endに余白を均等に配分してflexアイテム同士はcenterに詰めて配置する
- main-start、main-end、flexアイテムの間に余白を均等に配分する
- main-start、main-endには余白を入れず、flexアイテムの間だけに余白を均等に配分する
main-startやmain-endとあるように、flex-directionの値をもとに、縦方向または横方向の余白が調整されます。
画像も合わせた解説はコリス
画像つきの説明によって、flexアイテムと余白の関係性が解りやすいのが「CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス」でした。
2016年12月14日に公開された記事で、現在の日付から比較的新しくて解りやすかったです。
文字での解説はMDN
文字での説明はサンプルコードも含めて「justify-content - CSS | MDN」がとても解りやすかったです。
以下は引用です。
CSS justify-content プロパティは、コンテナの main-axis に沿ってスペースを flex アイテムの間や周囲へどのように分配するかを定義します。
長さや自動マージンが適用された後に配置が行われることから、flex-grow が 0 ではない flexible 要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。
