TechGekkaスマートフォン用の表示で見るTechGekkaこの広告は、90日以上更新していないブログに表示しています。今回はCSSの備忘録です。内容は、幅が可変長のサイトにおける、flexboxで要素は左寄せ、全体は中央寄せとする方法です。テキストだと説明しづらいので、画像をつかっていきます。やりたいことこのようなレイアウトを組みたいとする。コードでは下記のようになる。CodePen.このように、一見入りそうだけど、実はマージン込みでは入らず、下に落ちてしまう。この右側のスキマが気になるので、直していく。これを単純につかってしまうと・・・。CodePen.このように、最下段がおかしなことになる。一段あたりの要素の個数が決まっているなら、よくあるハウツーでは剰余の数だけ空の要素を入れればいい。今回は、ブラウザの幅によって個数を変えて、常に入りうる最大の数を一段に押し込みたい。下記のようになるのが理想である。設定することでできるはずだ。今回は可変長のため、一行あたりに何個入っているかをHTMLとCSSは知らないので、全体の幅から要素の横幅に個数をかけたものを引くなどというような、個数を用いる計算はできない。X(px)と求めることができる。剰余が実装されているならば、これでいけるはずだった。実装されてないばかりか、そもそもcalcはモダンブラウザしか使えないのでIEが死ぬ。ここはおとなしくJavaScriptを持ち出すことにする。ピクセルで用いるには、単純にJSで幅を取ってやればいいだけなので、ページロード時とリサイズ時に計算をして、CSSを書き換えてやる。用いることが必要なことに留意する。CodePen.これで、どのようなブラウザの幅でも、どのような要素でも柔軟に対応できる要素グリッドが出来上がった。コールバックがないならDOMの変更を監視する月花です。複雑なbindのリーディング月花です。twinviteでbootstrapを活用してエモい招待サイトを作る月花です。9.4より古いなら、マテビューをFROM句に入れるビューは良くない月別アーカイブはてなブログをはじめよう!gekka9さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。