เลย์เอาต์แบบไมโคร

เมื่อนึกถึงเลย์เอาต์ เรามักจะนึกถึงการออกแบบระดับหน้าเว็บ แต่องค์ประกอบขนาดเล็กภายในหน้าอาจมีเลย์เอาต์ที่เป็นของตัวเอง

ตามหลักการแล้ว เลย์เอาต์ระดับคอมโพเนนต์ จะปรับตัวเองโดยอัตโนมัติ โดยไม่คำนึงถึงอันดับในหน้าเว็บ อาจมีกรณีที่คุณไม่ทราบว่าจะวางคอมโพเนนต์ในคอลัมน์เนื้อหาหลัก หรือแถบด้านข้าง หรือทั้ง 2 อย่าง หากไม่ทราบว่าคอมโพเนนต์จะปรากฏที่ใด คุณต้องตรวจสอบว่าคอมโพเนนต์ปรับเปลี่ยนตัวเองให้เข้ากับคอนเทนเนอร์ได้

เลย์เอาต์แบบ 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 ที่แสดงการวางซ้อนแบบตารางกริด
เบราว์เซอร์บนเดสก์ท็อป เช่น Firefox และ Chrome มีเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่สามารถแสดงเส้นตารางและพื้นที่ซึ่งวางซ้อนอยู่บนการออกแบบของคุณ

ดูวิธีตรวจสอบเลย์เอาต์ตารางกริดในเครื่องมือสำหรับนักพัฒนาเว็บใน 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 เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome ที่แสดงการวางซ้อน Flexbox
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน Firefox และ Chrome สามารถช่วยให้คุณเห็นภาพของรูปร่างได้ ของคอมโพเนนต์ Flexbox

ดูวิธีตรวจสอบเลย์เอาต์ Flexbox ใน Chrome DevTools

การค้นหาคอนเทนเนอร์

Flexbox ให้คุณออกแบบจากคอนเทนต์ภายนอกได้ คุณสามารถระบุพารามิเตอร์ องค์ประกอบ (ควรแคบแค่ไหน กว้างเพียงใด) และปล่อยให้ หาวิธีใช้งานในขั้นสุดท้าย

แต่ตัวคอมโพเนนต์เองไม่รับรู้บริบทเลย ซึ่งจะไม่ทราบว่ามีการใช้งานในเนื้อหาหลักหรือในแถบด้านข้าง วิธีนี้อาจทำให้เลย์เอาต์คอมโพเนนต์ยากกว่าเลย์เอาต์หน้าเว็บ เพื่อให้สามารถใช้สไตล์ที่เกี่ยวข้องตามบริบท คอมโพเนนต์ของคุณต้องรู้มากกว่าขนาดของวิวพอร์ตที่มีอยู่

เมื่อใช้เลย์เอาต์หน้าเว็บ คุณจะทราบความกว้างของคอนเทนเนอร์เนื่องจาก Container คือวิวพอร์ตของเบราว์เซอร์ คำค้นหาสื่อรายงานมิติข้อมูลของ คอนเทนเนอร์ระดับหน้า

หากต้องการรายงานมิติข้อมูลของคอนเทนเนอร์ ให้ใช้ การค้นหาคอนเทนเนอร์

ในการเริ่มต้น ให้กำหนดว่าองค์ประกอบใดทำหน้าที่เป็นคอนเทนเนอร์

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 รูปภาพและข้อความจะปรากฏขึ้น แสดงคู่กัน

เมื่อใช้การค้นหาคอนเทนเนอร์ คุณสามารถจัดรูปแบบคอมโพเนนต์ได้อย่างอิสระ คุณเขียนได้ กฎตามความกว้างขององค์ประกอบที่มีอยู่ ความกว้างของ วิวพอร์ตไม่สำคัญอีกต่อไป

2 คอนเทนเนอร์ขนาดต่างกัน

รวมคำค้นหา

คุณสามารถใช้คิวรี่สื่อสำหรับการจัดวางหน้าเว็บและการค้นหาคอนเทนเนอร์สำหรับ คอมโพเนนต์ภายในหน้านั้นๆ

โครงสร้างโดยรวมของหน้าเว็บมีองค์ประกอบ 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 เท่านั้น

เลย์เอาต์แบบ 2 คอลัมน์ แบบหนึ่งกว้างและแคบ 
ออบเจ็กต์สื่อจะจัดวางแตกต่างกันไปขึ้นอยู่กับว่าออบเจ็กต์อยู่ในคอลัมน์กว้างหรือแคบ

การค้นหาคอนเทนเนอร์เป็นตัวเปลี่ยนเกมสำหรับเลย์เอาต์ขนาดเล็ก คอมโพเนนต์ของคุณอาจจะเป็นทุกอย่างด้วยตนเอง โดยไม่ขึ้นอยู่กับวิวพอร์ตของเบราว์เซอร์

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับเลย์เอาต์ขนาดเล็ก

ตารางกริดและ Flexbox มีประโยชน์กับเลย์เอาต์แบบไมโครไหม

จริง
🎉 ถูกต้อง!
เท็จ
ผิด ทั้งตารางกริดและ Flexbox มีประโยชน์มาก แม้จะเป็นกล่องที่ "เล็กที่สุด" มากมาย

ก่อนหน้านี้คุณได้เรียนรู้เกี่ยวกับเลย์เอาต์มาโครระดับหน้าเว็บ ตอนนี้คุณได้ทราบเกี่ยวกับ เลย์เอาต์ขนาดเล็กระดับคอมโพเนนต์

ถัดไป คุณจะเจาะลึกถึงองค์ประกอบสำคัญต่างๆ ของเนื้อหาของคุณ และเรียนรู้ วิธีทำให้รูปภาพปรับเปลี่ยนตามอุปกรณ์ได้ อย่างแรก คุณจะได้เรียนรู้เกี่ยวกับ การพิมพ์ที่ปรับเปลี่ยนตามอุปกรณ์