แพนเค้กสำเร็จรูป

นี่เป็นเลย์เอาต์ที่พบได้ทั่วไปในเว็บไซต์การตลาด เช่น เว็บไซต์อาจมีแถว 3 รายการ โดยปกติจะมีรูปภาพ ชื่อ และข้อความที่อธิบายถึงฟีเจอร์บางอย่างของผลิตภัณฑ์ ในหน้าจอขนาดเล็ก คุณจะต้องจัดวางไอคอนเหล่านั้นให้ซ้อนกันได้ดี และขยายออกเมื่อคุณเพิ่มขนาดหน้าจอ

เมื่อใช้ Flexbox สำหรับเอฟเฟกต์นี้ คุณจะไม่ต้องใช้ Media Query เพื่อปรับตำแหน่งขององค์ประกอบเหล่านี้เมื่อหน้าจอปรับขนาด

ทางลัด 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;
}