flex-start＋marginでのカード型レイアウト

左端のアイテムだけmarginを0にする

横方向にも一律に左にmarginをつけておいてから、各行で左に来るアイテムの左のmarginだけを上書きして0にする手法。
ただこの方法はカラム数が変更すると左marginを0にする対象も変わるため、通常のメディアクエリのように上書き方式にしていると、公倍数の関係でどうしても対象が重複し、打消しの指定が多くなってしまうという問題が発生する。そこで特定の範囲のみスタイルが効くようにメディアクエリのほうを切り分け方式で記述して打消しの発生を回避する。

.cardList02 {
	display: flex;
	flex-direction: column;
	margin-top: -20px; /*1行目の上マージンを相殺*/
}
.cardList02__item {
	margin-top: 20px;
}
/*PCレイアウト共通の設定*/
@media screen and (min-width: 768px),print {
	.cardList02 {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.cardList02__item {
		margin-left: 20px;
	}
}
/*768px以上2カラム*/
@media screen and (min-width: 768px) ,print {
	.cardList02__item {
		width: calc((100% - 20px) / 2);
	}
	.cardList02__item:nth-child(2n+1) {
		margin-left: 0; /*2カラム左端列の左マージンを0にする*/
	}
}
/*992px以上3カラム*/
@media screen and (min-width: 992px),print {
	.cardList02__item {
		width: calc((100% - 40px) / 3);
	}
	.cardList02__item:nth-child(2n+1) {
		margin-left: 20px; /*2カラム左端列の左マージンを20pxに戻す（1,3,5,7,9...）*/
	}
	.cardList02__item:nth-child(3n+1) {
		margin-left: 0; /*3カラム左端列の左マージンを0にする（1,4,7,10,13...）*/
	}
}
/*1200px以上4カラム*/
@media screen and (min-width: 1200px),print {
	.cardList02__item {
		width: calc((100% - 60px) / 4);
	}
	.cardList02__item:nth-child(3n+1) {
		margin-left: 20px; /*3カラム左端列の左マージンを20pxに戻す（1,4,7,10,13...）*/
	}
	.cardList02__item:nth-child(4n+1) {
		margin-left: 0; /*4カラム左端列の左マージンを0にする(1,5,9,13,17...)*/
	}
}

横方向も親要素のネガティブマージンで相殺する

横方向のmarginも親要素のネガティブマージンで相殺する手法。marginが%でなければ、縦方向のmarginを親要素から相殺したのと同時に横方向のmarginも親要素で相殺できる。
ただし、各アイテムのカラム幅の指定の際、calc()で親要素の幅100%から除外する段間のサイズを、隣接するアイテム同士の間の余白分のみのサイズではなく、親要素で相殺する予定の20pxも含めた各列の左マージン分合計のサイズで計算する必要がある。

.cardList03 {
　display: flex;
　flex-direction: column;
　margin-top: -20px;  /*1行目の上マージンを相殺*/
}
.cardList03__item {
　margin-top: 20px;
}
@media screen and (min-width: 768px),print {
　.cardList03 {
　　flex-direction: row;
　　flex-wrap: wrap;
　　margin-left: -20px;  /*左端列の左マージンを相殺*/
　}
　.cardList03__item {
　　margin-left: 20px;
　　width: calc((100% - 40px) / 2);  /*各列の左マージン分合計を除いて1/2*/
　}
}
@media screen and (min-width: 992px),print {
　.cardList03__item {
　　width: calc((100% - 60px) / 3);  /*各列の左マージン分合計を除いて1/3*/
　}
}
@media screen and (min-width: 1200px),print {
　.cardList03__item {
　　width: calc((100% - 80px) / 4);  /*←各列の左マージン分合計を除いて1/4*/
　}
}
inserted by FC2 system