11/1　学習内容（calc関数）

calc関数

→CSSで四則演算（足し算・引き算・掛け算・割り算）ができる関数

どんなときに使う？

要素を均等に配置したいとき
特にレスポンシブで「○個目の要素から折り返したい」というときにflex-wrapと併用すると便利。

計算の優先順位

1. かっこ内にある数式

2. 掛け算・割り算

3. 足し算・引き算

記述のときの注意点

• 「+」「-」の前後に半角スペースを入れる

  • スペースを入れないと数値の正負として認識されるため。

• 足し算・引き算の場合、両方の数字に単位をつける

• かけ算・割り算の場合、両方の数字に単位をつけない

• データ型の値のプロパティにしか使えない。

  • width、height、margin等

要素の横幅を均等に等分する

width: calc(100% / △);

2カラムのレイアウトの比率を設定する

width: calc(親要素の幅（%）　-　もう一方の幅　（px）);

※単純に比率で調整する場合、小要素に対して「flex:○（比率の数値）;」