#flexbox

レスポンシブサイトでよく使うレイアウトモジュール CSSの新しいレイアウトモジュールFlexbox ウェブサイトをコーディングしていると要素を横並びにする記述をよく使います。 かつては table（古い！）や float 、 inline-block などで横並びにしていましたが、レスポンシブ化が前提の昨今、 Flexbox をよく使います。 wrap指定で押し返してくれますし、 calc のパーセント指定で余白の計算もやりやすいです。 Flexboxはかつて多くのブラウザでベンダープレフィックスが必要でしたが、2021年現在すべてのモダンブラウザで対応済みです。 CSS Flex Boxの対応表 Can I useより Flexboxで作るPC2カラムSP1カラムのレイアウト それではCSSの新しいレイアウトモジュールFlexboxを使って簡単なレイアウトを作ってみましょう。一番基本的なPC2カラムSP1カラムのレイアウトです。 デモはこちらです。https://codepen.io/codenowa/full/vYxXWxy 要素の振る舞いはこんな感じになればOKです。 HTMLの記述 とてもシンプルです。 &lt;section&gt; &lt;div class="items"&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="https://via.placeholder.com/615x115" alt=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; CSS(SCSS)の記述 html, body { margin: 0; padding: 0; } section { margin: 0 2rem; } * { box-sizing: border-box; &amp;::before, &amp;::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; &amp;:nth-child(2n) { margin-right: 0; } } @media screen and (max-width: 689px) { img { border: 8px solid #f3f3f3; } .item { width: calc(100%); &amp;:nth-child(1n) { margin-right: 0; } } } とても簡単です。今回は幅指定で calc を使いましたが、flex-direction の row や column で出し分けてもいいかもしれません。余白はGapプロパティを使うと便利なのですが、まだ対応ブラウザが少ないので今回は回避しました。 まとめ 最近ではFlexboxの他、CSS Gridというレイアウトモジュールも登場しました。これらのレイアウトモジュールをうまく使い分け、少ない記述で簡潔に素早くコーディングしたいものですね。

Flexboxで作るPC3カラムSP2カラムのレイアウト

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