Flex-box を使った複数行カラム、可変レイアウトの基本型

2017年10月18日 更新

Flex-boxを使ったレイアウト方法は色々とありますが、
基本的な利用方法は、やはりカラムレイアウトを組む時だと思います。
最初は少しfloatよりも解りにくいですが、使い慣れたらこんなに強い味方はいない。

Flex-boxはかなり万能

カラムレイアウト以外でも、

  • 単純に要素を左右に並べたい
  • 左右に並べた要素を親の左右に均等に配置したい
  • 左右に並べた要素を縦横中央に配置したい
  • 入れ子にする事で縦、横、の配置が自由自在

などなど、かなり幅広く使えます。
ブラウザ対応も最新版であればベンダーなしで使えます。
単純にfloatを使うよりもソースを単純化でき、汎用性も高いのでfloatは完全に封印してFlexオンリーにシフトしていいと思います。

本題

そしてFlex-boxを使っている時に一つ問題があります。
それは、下記のようなデザインをしたい時、

  • 要素を横並びにし、その要素の数をウィンドウサイズで変えたい
  • 要素同士の感覚を空けたい
  • 5カラム→3カラム→1カラムのように可変したい

とりあえずSAMPLEを見てもらったほうが早いと思います。

一件Flexを使えば簡単に組めそうだが、
子要素のマージンを取るのが意外と簡単にできない。

いや、感覚を取ること自体は簡単だ、子要素に感覚を指定してやればいいだけの事。
しかし、単純に子要素にマージンを取ると、Flexの場合、親要素横幅MAXにならなかったり、段落ちしたり、する。
Flexデフォルト機能の色んな指定を使っても、レスポンシブカラムデザインに対応したものを作るのは意外と難しい。

Flex-boxの機能でもある、「justify-content」などを使えばとりあえずキレイに収まる。※可変させなければね。
ただ、例えば「justify-content」の、『space-between』を使った場合、
これは、「最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置」するというもの。
これだとウィンドウサイズで子要素同士の感覚がかわってしまう。
勿論それでもいいという場合もあるだろうが、キレイではない。

なのでそれ用にレイアウトを組む必要がある。

前置きが長くなってしまったが、ソースを紹介する。

Flex-boxで可変カラムレイアウトを組みたい時はこれ

説明

やっている事は単純で、calcを使い、子要素の大きさを%で指定し、要素の感覚分をマイナス。
親要素である、「flex-container」にネガティブを入れ、
子要素全体にmarginを取るだけ。

これだけのソースでカラムレイアウトが簡単にできてしまう。
これは単純な例で、もっと応用的な使い方もできる。
是非これを気にfloatは捨て、Flex-boxに以降してほしい。
ちなみに当サイトではfloatは一切使っていません。