[flexbox]media queryなしでレスポンシブ対応

やったこと

今回はflexboxを使ってmedia queryを使わずにレスポンシブデザインを作りたいと思います。

幅999px以下で縦に積み上がって、1000px以上は要素が半分になるように作っていきます。

コード

html

htmlは簡単にしています。

      <div class="flexbox">
        <div class="flexbox__item">アイテム1</div>
        <div class="flexbox__content">アイテム2</div>
      </div>

css

cssはこれだけです。

.flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.flexbox__item {
  background: #ddd;
  padding: 8px;
  flex-grow: 1;
  flex-basis: 450px;
  box-sizing: border-box;
}
.flexbox__content {
  width: 100%;
  background: #ff0000;
  flex-grow: 1;
  flex-basis: 450px;
  box-sizing: border-box;
}

キャプチャ

3つの枠を作ってみました。
上から360px, 600px, 1000px(幅は適当に設定しました)

解説

cssの解説になります。

まず親の要素(.flexbox)でdisplay: flex;を指定して、
flex-wrap: wrap;でflexboxからはみ出た要素を下に配置するように設定します。

その次に子要素にそれぞれ
flex-grow, flex-basisを設定します。

flex-growはflexboxアイテムの幅の伸び率を設定します。
今回の件で言うと1000px以上は要素が半分なので、均等に1:1で作るため、両アイテムとも1を設定しています。

flex-basisはflexboxアイテムの初期の寸法を設定します。
300pxに設定すればそれを元に他のアイテムとの兼ね合いを見て、伸長したり縮小したりします。
今回は両アイテムとも500px以下になれば縦にしたかったので、500pxを設定することで
各アイテムが500px以下になるとflex-wrapがあるので積み上げる形になります。

まとめ

flexの登場で最近のcssは面白い&やれる幅が増えているのでもっと勉強したいですね。