分解パンケーキ

これはマーケティング サイトでよく見られるレイアウトです。たとえば、3 つのアイテムの行で、通常は画像、タイトル、商品の特徴を説明するテキストで構成されます。小さな画面ではこれらを積み重ね、画面のサイズを大きくするにつれて拡大するようにします。

このエフェクトに Flexbox を使用すると、画面のサイズ変更時にこれらの要素の配置を調整するためのメディアクエリが不要になります。

flex は flex: <flex-grow> <flex-shrink> <flex-basis> の略です。

flex-grow ストレッチ

ボックスが次の行に折り返されるときにスペースを埋めるためには、<flex-grow> の値を 1 に設定します。次に例を示します。

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

今後は、画面サイズを増減すると、これらの Flex アイテムは縮小および拡大します。

ストレッチなし

ボックスを <flex-basis> サイズまで塗りつぶし、小さいサイズに縮小して、余ったスペースを埋めるために引き伸ばさないようにするには、flex: 0 1 <flex-basis> と記述します。この場合、<flex-basis> は 150 ピクセルです。

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

HTML

<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS

        .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box {
  /*  Stretching: */
  flex: 1 1 150px; 
  margin: 5px;
  background: red;
  gap: 1rem;
}