【メディアクエリ不要】わずか4行でレイアウトを組めるFlexbox

公開日：2021/10/08

更新日：2021/10/18

【メディアクエリ不要】わずか4行でレイアウトを組めるFlexboxのサムネイル画像

皆さんFlexboxを使っていますか？

要素を横並びにするには一昔前だとfloatで並べていたと思いますが、もうその時代は終わっています。floatを書いた後はclearfixで回り込み解除！なんて魔法も懐かしくもなりました。

現在、横並びで主流なのはFlexboxとCSS Gridになります。CSS Gridでも簡単に横並びが可能で、以前CSS Gridで3行でレイアウトを組める記事を書きました。

ただし、IEには対応していないプロパティが多いので、
今回は1点を除きIE対応のメディアクエリ不要のFlexboxを4行で実装してみたいと思います。

完成形
HTMLとCSS
- HTML
- わずか4行のCSS
ブラウザ対応状況
まとめ

完成形

まずは完成デモです。画面幅を大きくしたり小さくしたりして下さい。

デモサイト

HTMLとCSS

HTML

<ul>
  <li>
    <figure>
      <img src=“../../img/sample600x400.jpg“ alt=“”>
      <figcaption>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src=“../../img/sample600x400.jpg“ alt=“”>
      <figcaption>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="../../img/sample600x400.jpg" alt="">
      <figcaption>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="../../img/sample600x400.jpg" alt="">
      <figcaption>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="../../img/sample600x400.jpg" alt="">
      <figcaption>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <img src="../../img/sample600x400.jpg" alt="">
      <figcaption>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</figcaption>
    </figure>
  </li>
</ul>

わずか4行のCSS

ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
ul li {
    flex: 1 0 300px;
}

1行づつ解説していきます。

2行目のdisplay:flex;で直下のul直下の子要素（<li>タグ）を横並びにします。
3行目のflex-wrap:wrap;を設定すると複数行に折り返すことを許可します。※これを書かないと子要素が折り返さずに1行にすべての要素が入ります。
4行目のgap:20px;で要素間に余白をもたせます。marginやpaddingと違い、「要素間」に余白を作るので下記画像の紫部分のように隣り合わない部分には余白は発生しません。
7行目のflex:1 0 300px;は３つ値がありますがこちらは3つのCSSのショートハンドになっており、それぞれflex-grow、flex-shrink、flex-basicの値になります。
- flex-grow:1で行の空いた空間を埋めます。
- flex-shrink:0は要素の縮み率を指定していますが、今回特に仕事をしていません。
- flex-basis:300pxで要素の最小幅を設定しています。min-widthのようなイメージです。