「だいたい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)); /* こういうのはいいらしい */
でも見づらくなるから多用するのはよくなさそう。