CSSのdisplay: flex;で動的な幅変化に対応する

CSSのメモ。display: flex;で動的な横並べを行う。

実現したい動作
要素の概要
使用するCSSプロパティと値
実装

実現したい動作

要素Aの隣にある程度の幅が空いていれば、隣に要素Bを表示したい。要素Aは固定幅を持ち、要素Bは最小幅を持ち、幅の空きに応じて横に広がる。

幅に余裕のないときは、要素Aの下部に要素Bを表示する。

要素の概要

Flex Wrapper
- flex表示する要素のラッパー。
BLOCK A
- 幅は固定値。高さはなんでもいい。
BLOCL B
- 幅は可変。高さはなんでもいい。
- 画面幅 > (BLOCL Aの幅 + 固定値)なら、BLOCL Aの右横に配置し、横いっぱいに広がる。
- そうでないなら、BLOCK Aの下に配置し、横いっぱいに広がる。

使用するCSSプロパティと値

display: flex;
- Flex-Wrapperに指定する。コンテナになる。内包される要素はアイテムになる。
flex-wrap: wrap;
- Flex-Wrapperに指定する。コンテナはアイテムを折り返して表示する。
flex-basis: <width>;
- BLOCK Bに指定する。アイテムに初期値となる幅を指定する。
flex-grow: <number>;
- BLOCK Bに指定する。アイテムはコンテナの余った幅を<number>の重みに応じてレスポンシブに埋める。

実装

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.block-a {
  background-color: Violet;
  width: 540px;
  height: 180px;
}

.block-b {
  background-color: Tomato;
  height: 320px;
  flex-basis: 240px;
  flex-grow: 1;
}

codepenはこちら。ブラウザの幅を変えてみると様子がわかる。

See the Pen flex-practice by ikapper (@ikapper) on CodePen.

参考になりそうな本はこちら（広告）。