นี่เป็นเลย์เอาต์ที่พบได้ทั่วไปในเว็บไซต์การตลาด เช่น เว็บไซต์อาจมีแถว 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;
}