【css】画像や要素を均等なサイズで並べる

2019年5月18日2019年7月18日css

画像や要素を画面に均等な横幅とかで並べたいときってありますよね。

そんな時は、cssの「calc()」を使って計算式を指定すれば簡単にできるんです。

imgに「width: calc(100% / 4);」を指定すると、横幅を四等分にした数字を画像の横幅にしてくれて、画像を横に４つ同じ横幅で並べることができます。

ちなみに100%だと親要素の横幅に対して４等分になります。

「width: calc(100vw / 4);」といういように「100vw」とすると、ビューポート（ウィンドウの横幅）に対して４等分となります。

[index.css]

img {
  width: calc(100% / 4); /* 横幅を4等分にする */
}