拆解鬆餅

行銷網站常見的版面配置就是這類布局，可能會有一排三個項目，通常包含圖片、標題和一些文字，說明產品的部分功能。在較小的螢幕上，您會希望這些元素能整齊地堆疊，並隨著螢幕尺寸的增加而展開。

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

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