CONTENTS

ワードプレスの小ネタ集
WEB制作

おすすめPICK UPサービス!

CSS
公開日:2023.1212

CSSのflexboxにて横並び時のエッジの隙間をなくす。calc使用。

flexboxは大変便利で、3x3x3なども簡単に出来ます。

ここではcalcを使用していくのですが、

calc(100% / 3)

上記ではうまく隙間が作れません。

かといって余白をつけると、エッジではバグでカラム落ちしてしまいます。
その対処法は下記となります。

.box li {
		margin-left: 20px;
  		flex-basis: calc((100% - (20px * 2)) / 3 - .01px);
	}
.box li:nth-child(3n+1) {
		margin-left:0;
	}

これで対応可能です。