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選

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

HTML 表の列の横幅・色をまとめて指定する

CSS nth-child() 要素を順番で指定する偶数/奇数

flexbox IE11で起きるバグやずれに立ち向かう

Youtubeの埋め込み動画をレスポンシブにする

お得ニュース

AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中

ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール第2弾が開催

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

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

flex-basis calcの場合

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

関連記事

お得ニュース

プロフィール