サイト構築で文字やレイアウト、ヘッダーなどをコーディングし、そのあとCSSで装飾してフロントを作っていくんですが、今はモバイルファーストと呼ばれる時代で、スマホでサイトを閲覧することを優先的に考えるコーディングをすることが増えました。
そのため、レスポンシブ対応の為にPC版のみという分けにはいかず、様々な横幅に対応するような仕組みにしていきます。
そうすると、pxでフォントサイズや横幅を設定することが少なくなっていきます。しかし、複雑なWebデザインになるとそれも利用していく事になると、PC、タブレット、スマホと様々なデバイスでサイト見たときにそれぞれに対応するCSSを作っていけばいいだけなのですが、なるべく省略したいｗ
なので、自分は基本的にはPCとスマホに絞り、小型PCやタブレットに関してはサイズが小さくなるほど文字などが折り返して表示してもしょうがないよねと捨てますｗ
ただ、文字の大きさがPC版のままで横幅が小さくなれば見栄えが悪くなるのは少しでも軽減したい。しかし、横幅に応じて相対で設定すると、場合によってはコンテンツのテキストよりも小さくなってしまう可能性も。
など、色々とあるわけですが、ここ最近ちょっとサイズ設定するときにこれを使えば少し便利かもよって作業があったのでここに記録しておきます。
1.フォントサイズを横幅によって大小変わるけど、変化率は軽めにしたい場合
font-size: calc(10px + 1.5vw);フォントサイズの10pxは確保し、すべてvwでサイズを設定するよりかは文字の縮小拡大は緩くなる感じになります。
2.フレックスで左揃えだけど、隙間は均等で数が足りない場合でも左揃え（ボックスは430pxと決まっているとする）
gap: 0 calc((100% - (430px * 3)) / 2);左右に均等にボックスを分けたいときはspace-betweenを使う事がありますが、これ数が足りない時に真ん中が空いてしまうんですよね。（6個のボックスを3分割にした際に一つ足りない場合など）
親に対してafterにcontentを追加して補完する方法もあるようですが、入力などで動的に数が可変する場合もあるとそうもいかないこともあると思うので、この方法なら工夫次第では便利かも？
3.スクロールバーが発生したときの最大横幅
width: calc(100vw - (100vw - 100%));vwはブラウザの横幅、パーセントはスクロールバーより内側の横幅が対象となるそう。コンテンツによってはスクロールバーが有る無い、あっても幅が違う（タブレットやスマホ）などでvwの挙動はちょっと変わってくるようなので、そのときにスクロールバーの幅も対処できる方法があればちょっとは救われるかも？
vwとcalc()使うと色々と出来なかったサイズ設定がちょっとは解決に向かうかもしれません。
こうなると数学ってもっと勉強しとけばよかったとかも思えるｗ
そうして、フレックスの３等分に隙間をいれて左揃えにする方法が以下のように設定しました。
.parent {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 0 calc((100% - ((100% / 3 - 20px) * 3)) / 2);
}
.child {
width: calc((100% / 3) - 20px);
}
なんだこれｗ
他にもっとシンプルに良い方法がありそうｗ
だけど、これで上手くいったからとりあえずこれでいっとこう。