เมื่อนึกถึงเลย์เอาต์ เรามักนึกถึงการออกแบบระดับหน้าเว็บ แต่คอมโพเนนต์ขนาดเล็กในหน้าก็มีเลย์เอาต์ของตัวเองได้
โดยหลักการแล้ว เลย์เอาต์ระดับคอมโพเนนต์เหล่านี้จะปรับตัวเองโดยอัตโนมัติ โดยไม่คำนึงถึงตำแหน่งในหน้าเว็บ อาจมีสถานการณ์ที่คุณไม่ทราบว่าจะมีการวางคอมโพเนนต์ลงในคอลัมน์เนื้อหาหลักหรือแถบด้านข้าง หรือทั้งสองกรณี คุณต้องตรวจสอบว่าคอมโพเนนต์ปรับตัวเองให้เข้ากับคอนเทนเนอร์ได้ โดยไม่รู้ว่าคอมโพเนนต์จะไปจบที่จุดใด
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 ที่แสดงเส้นตารางที่ซ้อนทับกัน](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-41cc2b52eb644.png?authuser=6&hl=th)
![เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome ที่แสดงการวางซ้อนตารางกริด](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-295e54e7843c5.png?authuser=6&hl=th)
ดูวิธีตรวจสอบเลย์เอาต์ตารางกริดในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
เฟล็กซ์บ็อกซ์
คุณใช้ 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;
}
![เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Firefox ที่แสดงการวางซ้อน Flexbox](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-4f0d749fd4328.png?authuser=6&hl=th)
![เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome ที่แสดงการวางซ้อน Flexbox](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-49b481f837205.png?authuser=6&hl=th)
เรียนรู้วิธีตรวจสอบเลย์เอาต์ 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 ต่างก็มีประโยชน์สำหรับเลย์เอาต์ขนาดเล็กใช่ไหม
ก่อนหน้านี้ คุณได้เรียนรู้เกี่ยวกับเลย์เอาต์มาโครระดับหน้าเว็บ ตอนนี้คุณก็รู้เกี่ยวกับ เลย์เอาต์ขนาดเล็กระดับคอมโพเนนต์แล้ว
ต่อไป คุณจะเจาะลึกองค์ประกอบพื้นฐานที่สำคัญของเนื้อหา และเรียนรู้วิธีทำให้รูปภาพตอบสนองได้ ก่อนอื่น คุณจะได้ดูข้อมูลเกี่ยวกับการพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์