1. TOP
  2. デザイン
  3. flexboxの均等配置で最後の行を左寄せにする方法。

flexboxの均等配置で最後の行を左寄せにする方法。

 2018/12/28 デザイン
この記事は約 6 分で読めます。 15,086 Views

最近ではすっかりFlexboxでカラム組みをするようになりましたね。
floatでカラム組みをしていたのが懐かしい…笑

さてFlexboxで便利なjustify-contentでのspace-betweenやspace-aroundでの均等配置は便利ですが
3カラム組みで最後の行のコンテンツが2つだとうまくレイアウトができない…

なんてことがよく起きます。

そこで最後の行を左揃えにする方法をカラム数ごとに紹介します。

まずはjustify-contentで均等配置する方法。

justify-content : space-between

このようなコードで、コンテンツを端に揃えて、コンテンツごとの間隔を均等に配置します。

justify-content : space-around

コンテンツの枠とコンテンツごとの間隔をすべて均等に配置します。

とっても便利ですが…

最後の行が中途半端な数になったときの問題点

例えば3カラムで組んで最後の行が2個のコンテンツになった場合。以下のように中途半端なレイアウトに…

justify-content : space-between

justify-content : space-around

理想は…

最後の行が左揃えで揃うこのようなレイアウトですよね。

ではこのような理想的なレイアウトになるソースを紹介します。

flexboxでの3カラム均等配置で最終行を左揃え

flexアイテムが3カラムの場合、after擬似要素を利用して空のflexアイテムをつくることで、どのような数でも最終行が左揃えになります。

flexboxでの4カラム均等配置で最終行を左揃え

flexboxでの5カラム均等配置で最終行を左揃え

5カラム以上ではcssでの対応は難しく、少し力技ですが、空要素をhtmlに仕込むしか現状では対応策はなさそうです。

まとめ

便利なjustify-contentflexでの均等配置での最終行を左揃えにする場合は「bedore」「after」などの疑似要素で空要素を作っておくことで対応できます。

5カラム以上はhtmlで空要素をいれて左寄せで配置できるようにできます。

制作のご依頼・ご相談はこちら

dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。

今すぐご相談・問い合わせをする

\ SNSでシェアしよう! /

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

web制作・デザイン・システム開発・管理なら dainamo(ダイナモ)の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

エリー

エリー

dainamoで企画・デザイン・ライティング・マーケティングを担当。小さい頃から絵を描くのが好きでデザイナーへ。現在はモノづくり、コトづくり、ヒトづくりでクライアントや世の中により良い影響を与えることが目標。趣味は絵、カメラ、旅行、アウトドア。

この人が書いた記事  記事一覧

  • 【html】selectタグの最初のoption(選択してください)を選ばせない方法

  • 【コピペでOK】期間を指定して表示・非表示するPHP関数

  • ボタンの2重クリックや連打を防止するJavaScript

  • IoT時代のデザインはどうあるべきか

関連記事

  • ただ作品が並んでるだけではダメ?効果的なWEBポートフォリオサイトの作り方

  • 【2020年最新版】おしゃれなおすすめ日本語フリーフォント。プロのデザイナーでも使えます。

  • CSSでも字詰ができる!font-feature-settingsで美しい日本語フォントのカーニング

  • 魅力的で稼げるフリーランスデザイナーになるために磨くべき3つのスキル

  • [font-smoothing] cssでフォントをきれいでなめらかに見せる方法

  • スマホ・タブレットでのWEBサイト表示をPCで確認する方法まとめ(iOS/Android)