calc関数

calc関数最近になってようやく使い方が少しわかるようになり
その便利さに気付きましたが、最初見たときはそりゃまあ意味不明でした。
だって関数って名前ついてるし？？？？？でした。

僕個人として良く使う場面としては、良くあるカード型レイアウトです。
↓こんなの

僕は普段こういったレイアウトの時はBootStrapのグリッドシステムを使用するのですが(col-〇〇)、上記画像の最後の5カラムの時にBootStrapのグリッドでは再現しづらいのでcalcを使っています。正しいかどうかは知りません本当に知りませんよ。

cardのクラスはcard-itemとでもしておきましょう。そのカードを5列、カード同士の余白が30px、最後のカードは余白無しがいいですよね。ね。
5分割なので一つのcardの幅は20%がいいです。
が、

.card-item{
 width: 20%;
 margin-right: 30px;
}

余白も取ることを考えるとこれではカラム落ちしてしまいます。　
上記のCSSだと「20%に加えて余白30pxを取る」とゆうことなので5分割にはなりませんよね。
そこでcalcの出番です。
calcはプロパティの値を計算式で実行できる関数です。例えば

.card-item{
 margin-right: 30px;
 width: calc((100% / 120px) / 5 );
}

このように幅を書き換えます。(100% / 120px)は100%から余白の合計(30px×4)で120pxになるのでその幅を引いてそれを5で割る。
とゆう風にすると常に余白30pxの5分割レイアウトができます。
ただ、右端のcardは余白無しでぴったりくっつけたいので下記の記述をします。

.card-item:nth-child(5n){
 margin-right: 0;
}

calc便利だけど難しい。。w