セブンシックス・ブログ

SEVENSIX BLOG

Flexboxのjustify-contentをspace-betweenにしたとき最終行をきれいに配置する方法

デザイン

Share this 9 Bookmark this 6

こんにちは、セブンシックスのダイチです。今回は、コーダーさんのための、Flexboxについてのお話です。実は、リストを横並びにするCSSについての考察をまとめようと思ったのですが、ぐだぐだと長くなったので、今回はFlexboxについてのみ書くことにしました。

最終行が、思い通りにいかない!

Flexboxは、CSS3で追加されたレイアウトモジュールです。これまでfloatなどを駆使してレイアウトしていた箇所を、シンプルに記述できることから注目されていますが、なかなか思い通りにいかない点もあります。
そのうちのひとつが、justify-contentで両端揃えにしたときの最終行。子要素の数が半端になったときに、中央がぽかっと空いてしまう問題があります。

これは、正常な振る舞いなのですが、実際にこんな並べ方をしたデザインを作るデザイナーさんはいないと思います。最終行は、左揃えにしたいケースが多いのではないでしょうか。

足りない分だけ、空の子要素を入れると…

CSSのプロパティでこの問題を解決する方法は今のところありません。しかし、対処はできます。最終行で足りない分の個数だけ、子要素を追加してあげれば良いのです。

空の子要素で数を揃えてあげれば、表面上は最終行が左揃えになっているように見えます。ただし、これはあくまで「1行の子要素の数と最終行の子要素の数が分かる」場合にのみ有効で、子要素が増減したら、それに合わせて空の子要素の数を調整する必要があります。これでは、現実的ではありません。

とにかく空の子要素をたくさん入れればOK!

なら、あらかじめ空の子要素をたくさん入れてしまえばいいのです。空要素は高さ、上下マージン、上下パディングをゼロにすることで、「存在するけど見えない」状態にできます。

厳密には、「1行におさまる子要素数-2」個の空要素を入れておけば、最終行の子要素がいくつになっても左揃え(に見せかける状態)にできます。

jQueryで空の子要素を動的に追加してみる

せっかくなので、空要素をjQueryで動的に追加してみましょう。例えば、リスト形式でマークアップしていた場合、

みたいに記述してあげると、空の子要素が10個追加されます。ちなみに、上記のコードは、説明のために余計なCSSをぜんぶ省いているので、そのまま記述してもうまく表示されません。あしからず。

どうでもいい豆知識ですが、appendを10回繰り返すよりも、連結した文字列を1回でappendしたほうがブラウザに優しいというメリットがあります。この例だと空要素が10個なので、1行に子要素が最大12個まで入る状況下で、最終行を左寄せにできるというワケですね。

でも、超めんどくさい。

やってみて感想

当たり前ですが、なにがなんでもFlexboxを使っておけば最高で最強!というワケにはいきません。今回のように、子要素数が不確定かつ子要素を繰り返し並べる場合には、おとなしくfloatを使うってのも、賢明な判断かなと思います。

前田 大地

Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

関連記事

制作のご相談・見積依頼

CONSULTATION

お気軽にお問い合わせください。ご相談いただいた方には無料でご提案書とお見積書を作成しています。

ご相談・見積依頼はこちら