Flexboxで作るPC2カラムSP1カラムのレイアウト

レスポンシブサイトでよく使うレイアウトモジュール

CSSの新しいレイアウトモジュールFlexbox

ウェブサイトをコーディングしていると要素を横並びにする記述をよく使います。

かつては table（古い！）や float 、 inline-block などで横並びにしていましたが、レスポンシブ化が前提の昨今、  Flexbox をよく使います。

wrap指定で押し返してくれますし、 calc のパーセント指定で余白の計算もやりやすいです。

Flexboxはかつて多くのブラウザでベンダープレフィックスが必要でしたが、2021年現在すべてのモダンブラウザで対応済みです。

CSS Flex Boxの対応表

Flexboxで作るPC2カラムSP1カラムのレイアウト

それではCSSの新しいレイアウトモジュールFlexboxを使って簡単なレイアウトを作ってみましょう。一番基本的なPC2カラムSP1カラムのレイアウトです。

デモはこちらです。
https://codepen.io/codenowa/full/vYxXWxy

要素の振る舞いはこんな感じになればOKです。

HTMLの記述

とてもシンプルです。

 <section>
  <div class="items">
  
   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

   <div class="item">
    <img src="https://via.placeholder.com/615x115" alt="">
   </div>

  </div>
 </section>

CSS(SCSS)の記述

html, body {
  margin: 0;
  padding: 0;
}

section {
  margin: 0 2rem;
}

* {
  box-sizing: border-box;

  &::before, &::after {
    box-sizing: border-box;
  }
}

img {
  border: 10px solid #f3f3f3;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  box-sizing: border-box;
  width: calc(50% - 10px /2);
  margin: 0 10px 10px 0;

  &:nth-child(2n) {
    margin-right: 0;
  }
}

@media screen and (max-width: 689px) {
  img {
    border: 8px solid #f3f3f3;
  }

  .item {
    width: calc(100%);

    &:nth-child(1n) {
      margin-right: 0;
    }
  }
}

とても簡単です。今回は幅指定で calc を使いましたが、flex-direction の row や column で出し分けてもいいかもしれません。余白はGapプロパティを使うと便利なのですが、まだ対応ブラウザが少ないので今回は回避しました。

まとめ

最近ではFlexboxの他、CSS Gridというレイアウトモジュールも登場しました。これらのレイアウトモジュールをうまく使い分け、少ない記述で簡潔に素早くコーディングしたいものですね。