Flexboxで作るマルチカラムレイアウト【marginで余白を固定】

Flexboxを使ったマルチカラムレイアウトを作る場合、カラム間に「justify-content: space-between;」で均等に余白を空ける方法がありますが、

今回は、あえて「justify-content: space-between;」を使わずに、marginを使ってpx固定の余白を入れた場合のコードを説明していきます。

こんな感じのマルチカラムレイアウトを作ります。

↓

Flexboxで作るマルチカラムレイアウト、marginで余白を固定

Flexboxで作るマルチカラムレイアウト【marginで余白を固定】

index.html

<section id="card">
  <div class="card__contents">
    <article class="card__block">
      <div><img src="images/card-img-01.jpg" alt=""></div>
      <h3>タイトル１</h3>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing earticlet.
      </div>
    </article>
    <article class="card__block">
      <div><img src="images/card-img-02.jpg" alt=""></div>
      <h3>タイトル２</h3>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing earticlet.
      </div>
    </article>
    <article class="card__block">
      <div><img src="images/card-img-03.jpg" alt=""></div>
      <h3>タイトル３</h3>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing earticlet.
      </div>
    </article>
    <article class="card__block">
      <div><img src="images/card-img-04.jpg" alt=""></div>
      <h3>タイトル４</h3>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing earticlet.
      </div>
    </article>
    <article class="card__block">
      <div><img src="images/card-img-05.jpg" alt=""></div>
      <h3>タイトル５</h3>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing earticlet.
      </div>
    </article>
    <article class="card__block">
      <div><img src="images/card-img-06.jpg" alt=""></div>
      <h3>タイトル６</h3>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing earticlet.
      </div>
    </article>
  </div>
</section>

style.css

.card__contents{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.card__contents{
	width: 1146px;
	padding: 0 30px;
	margin: 30px auto;
}
.card__block{
	padding: 10px;
	margin: 0 30px 30px 0;
	background-color: #dfdfdf;
	border-radius: 4px;
	width: calc(33.3333333% - 30px * 2 / 3);
}
.card__block:nth-child(3n+3){
  margin-right: 0;
}
h3{
	margin: 20px 0;
	font-weight: bold;
}

ポイントは以下の3つ。

style.cssの16行目の、1カラムのwidth幅の計算です。

1カラムの幅を、全体の横幅（100％）から30pxの余白2個分を引いた幅を3等分した幅にしています。

このままでは左に全てのカラムが寄ってしまうので、

style.cssの13行目で、各カラムに「margin: 30px;」を右側と下側に入れています。

今回は3カラムレイアウトなので、一番右にあるカラム（3つ目と6つ目のカラム）には右側のmarginが不要です。

style.cssの18行目～20行目で、右端のカラムからmargin-rightを消しています。