復習のためまとめます。

実際のコード

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

calcとは

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

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

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

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

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

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

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

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