拆解鬆餅

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

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

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

如果您希望方塊在納入下一行時延展並填滿空間,請將 <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;
}