เมื่อนึกถึงเลย์เอาต์ เรามักจะนึกถึงการออกแบบระดับหน้าเว็บ แต่คอมโพเนนต์ขนาดเล็กภายในหน้าเว็บก็มีเลย์เอาต์แบบสแตนด์อโลนได้
เลย์เอาต์ระดับคอมโพเนนต์เหล่านี้ควรปรับตัวเองโดยอัตโนมัติ ไม่ว่าคอมโพเนนต์จะอยู่ที่ตำแหน่งใดในหน้าเว็บ อาจมีบางสถานการณ์ที่คุณไม่แน่ใจว่าคอมโพเนนต์จะอยู่ในคอลัมน์เนื้อหาหลัก แถบด้านข้าง หรือทั้ง 2 อย่าง คุณจึงต้องตรวจสอบว่าคอมโพเนนต์สามารถปรับตัวเองให้เข้ากับคอนเทนเนอร์ได้โดยไม่จำเป็นต้องรู้ว่าคอมโพเนนต์จะไปอยู่ที่ใด
GRid
กริด CSS ไม่ได้มีไว้สำหรับเลย์เอาต์ระดับหน้าเว็บเท่านั้น แต่ยังเหมาะกับคอมโพเนนต์ที่อยู่ในเลย์เอาต์เหล่านั้นด้วย
ในตัวอย่างนี้ ::before และ ::after
องค์ประกอบเสมือน จะสร้างเส้นตกแต่งที่ด้านใดด้านหนึ่ง
ของส่วนหัว ส่วนหัวเองก็เป็นคอนเทนเนอร์กริด องค์ประกอบแต่ละรายการจะจัดวางเพื่อให้เส้นเติมพื้นที่ที่ใช้ได้เสมอ
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
เบราว์เซอร์บนเดสก์ท็อป เช่น Firefox และ Chrome มีเครื่องมือสำหรับนักพัฒนาเว็บที่แสดงเส้นกริดและพื้นที่ที่ซ้อนทับบนการออกแบบได้
ดูวิธีตรวจสอบเลย์เอาต์กริดในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
Flexbox
คุณสามารถใช้ Flexbox เพื่อทำให้ คอมโพเนนต์มีความยืดหยุ่นได้ตามชื่อ โดยประกาศว่าองค์ประกอบใดในคอมโพเนนต์ควรมีขนาดต่ำสุดหรือสูงสุด และให้องค์ประกอบอื่นๆ ยืดหยุ่นเพื่อให้พอดีตามนั้น
ในตัวอย่างนี้ รูปภาพใช้พื้นที่ 1 ใน 4 ของพื้นที่ที่ใช้ได้ และข้อความใช้พื้นที่ 3 ใน 4 ที่เหลือ แต่รูปภาพจะมีขนาดไม่เกิน 200 พิกเซล
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
ดูวิธีตรวจสอบเลย์เอาต์ Flexbox ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
การค้นหาคอนเทนเนอร์
Flexbox ช่วยให้คุณออกแบบจากเนื้อหาออกไปได้ คุณสามารถระบุพารามิเตอร์ขององค์ประกอบ (ควรแคบได้มากน้อยเพียงใด ควรขยายได้มากน้อยเพียงใด) และให้เบราว์เซอร์จัดการการใช้งานจริงขั้นสุดท้าย
แต่คอมโพเนนต์เองไม่ทราบบริบทของตัวเอง ไม่รู้ว่ามีการใช้ในเนื้อหาหลักหรือในแถบด้านข้าง ซึ่งอาจทำให้เลย์เอาต์คอมโพเนนต์ซับซ้อนกว่าเลย์เอาต์หน้าเว็บ คอมโพเนนต์ต้องทราบข้อมูลมากกว่าขนาดของวิวพอร์ตที่อยู่ภายในจึงจะใช้รูปแบบที่เกี่ยวข้องตามบริบทได้
ในเลย์เอาต์หน้าเว็บ คุณ ทราบ ความกว้างของคอนเทนเนอร์เนื่องจากคอนเทนเนอร์คือวิวพอร์ตของเบราว์เซอร์ และคิวรี่สื่อจะรายงานขนาดของคอนเทนเนอร์ระดับหน้าเว็บ
หากต้องการรายงานขนาดของคอนเทนเนอร์ ให้ใช้ การค้นหาคอนเทนเนอร์
เริ่มต้นด้วยการกำหนดว่าองค์ประกอบใดทำหน้าที่เป็นคอนเทนเนอร์
main,
aside {
container-type: inline-size;
}
ซึ่งหมายความว่าคุณต้องการค้นหามิติข้อมูลแบบอินไลน์ สำหรับเอกสารภาษาอังกฤษ นั่นคือแกนแนวนอน คุณจะเปลี่ยนรูปแบบตามความกว้างของคอนเทนเนอร์
หากคอมโพเนนต์อยู่ในคอนเทนเนอร์ใดคอนเทนเนอร์หนึ่ง คุณจะใช้รูปแบบได้ในลักษณะเดียวกับการใช้คิวรี่สื่อ
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
หากออบเจ็กต์สื่ออยู่ในคอนเทนเนอร์ที่มีความกว้างน้อยกว่า 25em ระบบจะไม่ใช้รูปแบบ Flexbox รูปภาพและข้อความจะปรากฏเรียงกันในแนวตั้ง
แต่หากองค์ประกอบที่บรรจุมีความกว้างมากกว่า 25em รูปภาพและข้อความจะปรากฏเคียงข้างกัน
การค้นหาคอนเทนเนอร์ช่วยให้คุณจัดรูปแบบคอมโพเนนต์ได้อย่างอิสระ คุณสามารถเขียนกฎตามความกว้างขององค์ประกอบที่บรรจุ โดยไม่จำเป็นต้องคำนึงถึงความกว้างของวิวพอร์ตอีกต่อไป
รวมการค้นหา
คุณสามารถใช้คิวรี่สื่อสำหรับเลย์เอาต์หน้าเว็บ และใช้การค้นหาคอนเทนเนอร์สำหรับคอมโพเนนต์ภายในหน้าเว็บ
ในที่นี้ โครงสร้างโดยรวมของหน้าเว็บมีองค์ประกอบ main และองค์ประกอบ aside
โดยมีออบเจ็กต์สื่ออยู่ภายในทั้ง 2 องค์ประกอบ
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
คิวรี่สื่อจะใช้เลย์เอาต์กริดกับองค์ประกอบ main และ aside เมื่อวิวพอร์ตมีความกว้างมากกว่า 45em
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
กฎการค้นหาคอนเทนเนอร์สำหรับออบเจ็กต์สื่อยังคงเหมือนเดิม นั่นคือใช้เลย์เอาต์ Flexbox แนวนอนก็ต่อเมื่อองค์ประกอบที่บรรจุมีความกว้างมากกว่า 25em
การค้นหาคอนเทนเนอร์เป็นเครื่องมือสำคัญสำหรับเลย์เอาต์ขนาดเล็ก คอมโพเนนต์ของคุณสามารถเป็นแบบสแตนด์อโลนได้โดยไม่ขึ้นอยู่กับวิวพอร์ตของเบราว์เซอร์
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับเลย์เอาต์ขนาดเล็ก
กริดและ Flexbox มีประโยชน์สำหรับเลย์เอาต์ขนาดเล็กใช่ไหม
ก่อนหน้านี้ คุณได้เรียนรู้เกี่ยวกับเลย์เอาต์มาโครระดับหน้าเว็บ ตอนนี้คุณทราบข้อมูลเกี่ยวกับเลย์เอาต์ไมโครระดับคอมโพเนนต์แล้ว
จากนั้นคุณจะเจาะลึกไปที่ส่วนประกอบพื้นฐานของเนื้อหาและเรียนรู้วิธีทำให้รูปภาพปรับเปลี่ยนตามอุปกรณ์ โดยเริ่มจากเรียนรู้เกี่ยวกับ การจัดรูปแบบตัวอักษรที่ปรับเปลี่ยนตามอุปกรณ์