More than 3 years have passed since last update.

[CSS] 要素をきっかり3分割するCSSの書き方

Last updated at 2021-06-18Posted at 2021-06-17

CSSで要素を３分割する方法です。

例えば以下のように画像が3つの状態があるとします。

<div class="img-container">
 <img src="hoge1">
 <img src="hoge2">
 <img src="hoge3">
</div>

.img-container {
  display: flex;
}
.img-container img {
  width : 33.33333% ; 
}

また計算式を使えるcalcを使えばきっかり3分割に等分指定できます

.img-container {
  display: flex;
}
.img-container img {
  width: calc(100% / 3);
}