復習のためまとめます。

実際のコード

See the Pen Untitled by みーつつ@web (@mitsutsu322) on CodePen.

calcとは

calcは計算ができる関数です。

  • 足し算 +
  • 引き算 –
  • 掛け算 *
  • 割り算 /

calcで子要素の幅を指定します（3等分の場合）

width: calc(100%/ 3 – 10px * 2/3);

3等分した子要素の幅から、２か所の余白（10px）を引いた幅を計算します。

  • 子要素の幅と、子要素同士の間隔の幅を簡単に指定できるのが便利です。
  • 計算の手間も省けます。
    （3等分なら33.33%とすぐにでますが、6等分は何％だっけ…と電卓をたたかなくても大丈夫）

6等分のとき
width: calc(100%/ 6 – 10px * 5/6);

5等分のとき
width: calc(100%/ 5 – 10px * 4/5);