แพนเค้กสำเร็จรูป
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
นี่เป็นเลย์เอาต์ที่พบได้ทั่วไปในเว็บไซต์การตลาด เช่น เว็บไซต์อาจมีแถว 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;
}
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2024-12-21 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2024-12-21 UTC"],[],[]]