2018年06月12日に初出の投稿

Last modified: 2018-06-12

最近は IE9 以降に対応してることもあって、flex を多用するコーディングが増えているようだ。でも、flex を使うのは子要素のいちばん末端にしておかないと、上位で使うとネストさせるのが非常に難しくなる。これはすごく単純なカラムレイアウトなどで使うのはいいが、いままで float や inline-block などで並べてきたものを、flex で簡単に並べられるからといって使っていると、あとから下の階層でネストさせようにもコントロールが効かなくなる。その典型は、flex で並べている途中で幅が 100% の要素を挟むような場合だ。フレキシビリティを無視して幅をピクセルやパーセントで固定していいならともかく、昨今のレイアウトでそれは難しい。しかし、単純に flex で子要素を並べているだけだと、同じ flex の指定が優先されて幅の指定が吹き飛んでしまう。もちろん、その要素だけ display: block などと指定しても無駄だ。たぶん、そういう複雑な組み方をする場合は、皮肉な話だがスタイルシートで display: table を使う方がマシではないか。

  1. もっと新しいノート <<
  2. >> もっと古いノート

冒頭に戻る


※ 以下の SNS 共有ボタンは JavaScript を使っておらず、ボタンを押すまでは SNS サイトと全く通信しません。

Twitter Facebook