親要素.container-1 525px、子要素.box x 5個

分かりやすいよう親要素の背景に色をつけています。

 

.container-1 .box {
  width: calc(525px / 5);
}

親要素の横幅は525pxなのでこの場合子要素の横幅は105pxということになり、子要素の値の合計は親要素とピッタリ合っているということになります。

今度は親要素の横幅を5で割ると子要素の横幅の数値に小数点が出るサンプルをいくつか作ってみます。

親要素.container-2 526px、子要素.box x 5個

 

.container-2 .box {
  width: calc(526px / 5);
}

親要素の横幅は526pxなのでこの場合子要素の横幅は105.2pxということになり小数点が出ます。

親要素.container-3 527px、子要素.box x 5個

 

.container-3 .box {
  width: calc(527px / 5);
}

親要素の横幅は527pxなのでこの場合子要素の横幅は105.4pxということになり、前のサンプル同様小数点が出ます。

親要素.container-4 528px、子要素.box x 5個

 

.container-4 .box {
  width: calc(528px / 5);
}

親要素の横幅は528pxなのでこの場合子要素の横幅は105.6pxということになり、前のサンプル同様小数点が出ます。

これら子要素の横幅が小数点になる場合、Chromeで動作確認すると最後の子要素の後にサンプルによっては隙間ができたりできなかったり(；ﾟДﾟ)

他のブラウザでも見てみます...

IE、Edge、Safari、Firefoxもピッタリと親要素の大きさに合っていました。

が、

これはWindows、Mac共にChromeだけ他のブラウザと動きが違うようです。

なんだかよくわかりませんがChromeでcalc()関数を使うと他のブラウザと見え方が違うことがあるみたいです。

---

最初の目的、割り切れない数値でも本当にピッタリになるの⁉️...、ですが、Chromeだとぴったりにはならないことがある、という結果になりました('～' ;)

calc()関数を使う場合、IEとEdgeだけ気をつけていれば良いのかと思ってましたが、1pxのズレも許されないようなコーディングの場合はChromeでも注意が必要なようです。

---

【Labs】CSSで関数が使えるって知ってました！？ 【Labs】ナビゲーションボタンをcalc()関数で作ってみる