読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

display:flexの学習 その0001-05 main axis方向の余白の配分(flexアイテムの配置)を設定する justify-contentについて

参考にさせて頂いたページ

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 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。