【CSS】Flexbox 最後の行を左寄せにする(space-between使用時)

【CSS】Flexbox 最後の行を左寄せにする(space-between使用時)

4カラムの場合。
before擬似要素、after擬似要素で空白のボックスを作る。

サンプル

See the Pen 【flexbox】justify-content: space-between 最後の行を左寄せにする by 125naroom (@125naroom) on CodePen.

サンプル NG

before擬似要素、after擬似要素がないとこうなる。

See the Pen 【flexbox】justify-content: space-between 最後の行を左寄せにする NG by 125naroom (@125naroom) on CodePen.

必要なもの

4カラムの場合。

See the Pen 【flexbox】justify-content: space-between 最後の行を左寄せにする 必要なもの by 125naroom (@125naroom) on CodePen.

関連記事

【CSS】Flexboxの使い方と実装サンプル集

【CSS】Flexbox 最後の行を左寄せにする(space-between使用時)

デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
mono°goen°
  • 2022.01.13New
  • mono°goen°
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう