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を指定

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選