ホームページ

  • Twitter
  • Facebook
  • HATENA
  • POCKET

flexboxの子要素をコンテナー要素にあわせて伸縮させない方法

目次

  1. そもそもflexboxとは
  2. flexboxでやりたいこと
  3. 解決方法
  4. まとめ
好きな花は藤です。とらりんです。
さてさて、今回は単純な事だけど知って目から鱗が落ちた件をご紹介します。

そもそもflexboxとは

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

flexbox、皆さま使ってますでしょうか。
この子の登場によりそれまでfloatで行っていた横並びの設定がグンと楽になりました。
親要素にdisplay:flexを設定するだけで子要素が横並びになり、しかも配置や縦横方向なども設定できちゃったりする。考えた人ありがとう!な素晴らしいプロパティです。

flexboxでやりたいこと

flexboxで横並びにした要素を、囲んだ枠内でスクロールさせたい。
よし、flexboxで一件落着!・・・落着しない!

解決方法

さて困った。
CSS決定委員(って人がいるのか?)がきっと困る人が出てくるに違いない、と思ったかどうかは分かりませんが、ちゃんとプロパティが用意されていました。
その名もflex-shrink。shrinkは縮む、縮めるという意味。
これに0を設定すると縮まらず意図したとおり横並びになります。
CSS の flex-shrink プロパティは、フレックスアイテムの縮小係数を設定します。フレックスアイテムの寸法がフレックスコンテナーよりも大きい場合、アイテムは flex-shrink の数値に従って縮小して収まります。

まとめ

いかがでしたか。
頭の片隅にとどめておいていただけると、いつか使える日がくるかもしれません。
  • Twitter
  • Facebook
  • HATENA
  • POCKET
  •