レスポンシブサイトでよく使うレイアウトモジュール
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というレイアウトモジュールも登場しました。これらのレイアウトモジュールをうまく使い分け、少ない記述で簡潔に素早くコーディングしたいものですね。