分解パンケーキ

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

この効果に 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 px です。

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}
HTMLCSS
<div class="parent">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
 

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

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