【C】calc()でどうにかするCSS #CSS

「だいたいcalcで調整すればなんとかなる」という良くない気がする考えに行き着いた。

問題

<body>
    <div class="itemList">
        <!-- youtubeの動画一覧みたいなものを作りたい！ -->
        <div>
            この中に色々
        </div>
        <div>
            この中に色々
        </div>
        <div>
            この中に色々
        </div>
        <div>
            この中に色々
        </div>
    </div>
</body>

body {
    width: 100%:
}
div.itemList {
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
}
div.itemList > div {
  width: 50%;
  margin: 10px; /* 10pxくらい隙間を開けておきたいな！ */
}

どうして……？

原因

div.itemList > divはそれぞれ50% + 20pxとってる
……ので、2つ横並びにしようとすると100% + 40pxとなり40pxオーバーするので横には並ばない

じゃあwidthを50% - 20pxにすればいいな〜そういう指定方法ないかな〜 → ある

解決

div.itemList > div {
  width: calc(50% - 20px);
}

CSSは関数が使える。calc(値演算子値)。
演算子は+-*/があり、*ならどちらか、/なら右側の値が数値でなければならない。
また、+-の場合は演算子前後にホワイトスペース必須。

参考

値3つ以上を演算したいときは入れ子にする

calc(10vw + 10% + 10px); /* これはだめらしい */
calc(10vw + calc(10% + 10px)); /* こういうのはいいらしい */

でも見づらくなるから多用するのはよくなさそう。