Flexboxコンテナの左右の余白をいい感じにする - 旧gaaamiiのブログFlexboxコンテナの左右の余白をいい感じにしたい！でもできない！と悩んだので、それを共有します。最終的に、CSSだけで書くのは諦めてJavaScriptを書きました。悔しい！！ なにを実現したいのか いくつかのアイテムを持つFlexboxコンテナで、左揃えで、画面内におさまるように折り返して、コンテナの左右の余白は均等になっているやつをCSSで書きたかった。 こういうやつです。 やってみよう こんなん楽勝でしょ。と手を付けたんですが、楽勝ではありませんでした。 折り返す まずは折返しです。これはもう、flex-wrap: wrap; を指定すればいいだけです。これはすぐできました。 /* 値を設定するだけなら変数にする必要はないのだけど、*/ /* このときはcalc()などを活用してCSSだけでいけると思っていた... */ :root { --cardWidth: 240px; -
