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

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

การใช้ 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;
}