拆解鬆餅

舉例來說，這是行銷網站的常見版面配置，其中可能包含三個項目，通常包含圖片、標題和文字，說明產品的部分功能。而在較小的螢幕上，廣告最好可以完美堆疊，並隨著螢幕變大而展開。

透過 Flexbox 來達到這項效果，您就不需要在螢幕大小調整時，利用媒體查詢來調整這些元素的位置。

flex 簡寫代表：flex: <flex-grow> <flex-shrink> <flex-basis>。

伸展flex-grow

如果您希望方塊在納入下一行時延展並填滿空間，請將 <flex-grow> 的值設為 1，例如：

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

現在，隨著您調整螢幕大小，這些彈性項目會同時縮小和放大。

無伸展運動

如果您希望方塊填滿 <flex-basis> 大小，請縮小尺寸，但不要延伸至任何其他空間，請輸入 flex: 0 1 <flex-basis>。在這種情況下，您的 <flex-basis> 為 150 像素：

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

<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;
}