【Flexbox】2つの弱点とその対応策。Flexboxは万能ではない。

tfWg91Ve9FaMQ0st

Flexboxが使われ始めた2011年頃には、いかに万能であるかよく喧伝されていました。
しかし以下2つの条件下において、Flexboxの利便性は大幅に低下します。

  • 横並びブロックを改行する
  • 横並びコンテンツを天地中央に配置する

Flexboxを過信して作業時に動揺しないよう、デモを作り対応策を考えました。

目次

 

横並びブロックを改行する

7qK3x5zzsQ45map4

Q. Flexboxで普通に改行するには?

A. デフォルト値で調整するしかない。

きっと何か方法があるはずだとアレコレ試したが、無理であると思い至る。レスポンシブコーディングでは、ブレークポイントで  justify-content の指定を分けて調整するのがベター。

 

デモの共通コード

 

親ブロックいっぱいに敷き詰めてくれるが、改行すると左寄せにならない

 

左右の余白を均等にしてくれるが、改行すると左寄せにならない

 

float / inline-block と同様の結果

 

横並びコンテンツを天地中央に配置する

A2hXC3Bf685A2Go6

Q. Flexboxで天地中央に配置し、ブロックの高さも揃えるには?

A. 解決策なし! table に頼るしかない。

これはちょっと予想外だった。
Flexboxのデモを試せるサイトで align-items / center を選択しても、上下は伸びてくれないことがわかる。

6jQ88Lcq8G0Ycexp

 

うーむ、W3Cはなぜ table の利便性をFlexboxに適用しなかったんだろう? 大きな疑問が残る。

ふと気づけば、自分で「面倒なときは table 使おう」と書いていた…(´・ω・`)

 

デモの共通コード

 

天地中央に配置できるが、高さは揃わない

 

高さは揃うけど、天地中央に配置できない

 

親ブロックの高さを指定すれば可能だが、実用性なし

 

table-cell

 

table

 

 

Flexboxについて書いた過去の記事

    • このエントリーをはてなブックマークに追加