CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック

CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ

[coliss]

「一定サイズ以下の時に」「MediaQueryで」とかコメントにあるけど、それでは実装できないことを理解できてないのかな。

[kojika17]

こんなことするぐらいなら、display: flex;のところを一定サイズ以下の時にdisplay: block;にするだけでいい気がする

[sigwyg]

素直にMediaQuery使わない理由が「どんな幅のコンテナに突っ込んでも動作するように」だからなあ。もちょっと分解した方が良いと思う。CSSで複雑なことしすぎると、結局使われないゴミが増える

[mr_mayama]

どういう見た目になるかコードを読んでわかりづらいのは問題にしないのか？

[lifeisadog]

Media Queryで実装するのは確かに馬鹿げてるんだけど、じゃあJSで解決って言われても、それも違くね？としか思わん。素直にMedia Query使お

[szmk]

“する”

[jitojito]

heydon氏の内容はすばらしいのにいつも無駄な言い回しが多いなｗ

[pmint]

CSSで条件分岐のようなことをする方法。Flexbox自体「いい感じに」レイアウトしてくれるものであって、こんなふうにコントロールするものじゃないけど。

[hdampty7]

幅が違う要素が事前に分かってるなら出すときにclass名で分けるとかするのが普通じゃないかなぁ。そういう何も指標がない場合はJSでやったほうがメンテナンス性考えても吉。

[cartman0]

たしかにmedia query でwidth:calc(100%/3)とかのほうがいいな

[k3akinori]

バッドノウハウだね。