flexbox 横並びでマージンを取るためにflex-basis calcを使う

flexboxで横並びのマージンを取る場合は、ネガティブマージンを使っていましたが、flex-basis calcを使ったほうがシンプルに実装できます。

ネガティブマージンの場合

.flexbox{
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-left: -20px;
	margin-right: -20px;
}
.flexbox .item{
	width: 50%;
	margin-left: 20px;
	margin-right: 20px;
}

flex-basis calcの場合


.flexbox{
	display: flex;
	justify-content: space-between;
}
.flexbox .item{
	flex-basis: calc(50% - 20px);
}
  • 50%から20px差し引いた値が要素の幅
  • 50%は要素の幅を指定
  • 20pxはmarginを指定
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。