นี่เป็นเลย์เอาต์ที่พบได้ทั่วไปในเว็บไซต์การตลาด เช่น เว็บไซต์อาจมีแถว 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;
}
HTML
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
CSS
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}