株式会社スゴヨク グーグルパートナーバッジ

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > display: flex; + justify-content: space-between;で最後の行の要素を左寄せにしたい

SUGOYOKU BLOG

display: flex; + justify-content: space-between;で最後の行の要素を左寄せにしたい

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

簡単に整ったレイアウトを叶えることのできるdisplay: flex; + justify-content: space-between;の組み合わせですが、最後の行の要素だけ左右に広がって配置されて困ったことはありませんか?こんなときの対処方法を解説します。

「justify-content」について

そもそも「justify-content」プロパティとは?


要素を横並びにする際にとても便利な「display: flex;」ですが、「justify-content」のプロパティを併用することでflexbox内の要素を均等に配置することができます。



「justify-content」のプロパティの値

・flex-start / start:要素を左寄せ(上寄せ)にする ←初期値
・flex-end / end:要素を右寄せ(下寄せ)にする
・center:要素を中央に寄せる
・space-between:要素と要素の間の余白を均等にとって、両端の要素はflexboxの両端に寄せる
・space-around:要素の周りの余白を均等にとる(要素と要素の間の余白は、両端の要素とflexboxの間の余白の倍になる)
・space-evenly:要素の余白をすべて均等にとる(要素と要素の間の余白と、両端の要素とflexboxの間の余白は等しい)



「justify-content: space-between;」について

最後の行だけ要素が左右に広がってしまう

「justify-content: space-between;」では、要素を2列に並べる場合や、要素の総数が列の数の倍数であれば整ったレイアウトにすることができますが、それ以外の場合には最後の行の要素だけ左右に広がって配置されてしまいます。例えば5個の要素を3列で並べる場合には以下のようなことが起こります。


HTML


CSS


↑これを……


↓こうしたい!!……と考える人は多いと思います。





簡単な解決策

空の疑似要素を使う

こんなときには疑似要素を使うとあっという間に解決することができます。


空の疑似要素を利用することで、最後の行の要素も左寄せにすることができます。



HTML
  • 要素1
  • 要素2
  • 要素3
  • 要素4
  • 要素5

CSS


ポイント

空の疑似要素のwidthはflexbox内の要素と同じ値にする必要があります。


また、この空の疑似要素にheightを設定しないことも大切なポイントです。これによって、flexbox内の要素がちょうど綺麗に並ぶときには、この疑似要素のheightは0となるため、変な余白を作ってしまうということもありません。

おわりに


勉強中の方、「justify-content: space-between;」を左寄せにしたくて困っている方の参考になれば嬉しいです。

HP無料診断

毎月3社様限定SEO対策無料診断

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得