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

投稿者: | 2019-12-25

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

実現したい動作

要素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.

参考になりそうな本はこちら(広告)。