การจัดแนวพื้นฐานล่าสุด

ตอนนี้เครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดรองรับการจัดตำแหน่งพื้นฐานล่าสุดในตารางกริดและ Flexbox ของ CSS แล้ว

Rachel Andrew

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

การปรับเกณฑ์พื้นฐานแบบแรก

หากคุณตั้งค่า align-items เป็น baseline ผลลัพธ์จะเป็นความสอดคล้องพื้นฐานก่อน ดังนั้นเกณฑ์พื้นฐานแรกของรายการที่คุณปรับแนว (อธิบายไว้คือเรื่องที่สอดคล้องกัน) จะสอดคล้องกับเกณฑ์พื้นฐานแรกของรายการอื่นๆ ในกลุ่ม คุณจะเห็นข้อมูลนี้ในตัวอย่างต่อไปนี้ ซึ่งรายการแบบยืดหยุ่น 2 รายการแรกอยู่ในแนวเดียวกันโดยใช้ align-items: baseline เพื่อให้สอดคล้องตามเกณฑ์พื้นฐานที่สร้างขึ้นโดยข้อความขนาดใหญ่ รายการสุดท้ายจะสอดคล้องกับ flex-start จึงสอดคล้องกับจุดเริ่มต้นของคอนเทนเนอร์ Flex

ความสอดคล้องพื้นฐานล่าสุด

เมื่อจัดแนวรายการแบบตารางกริดหรือรายการ Flex ด้วยค่า last baseline เกณฑ์พื้นฐานสุดท้ายของรายการนั้นจะตรงกับเกณฑ์พื้นฐานสุดท้ายของกลุ่มการแชร์พื้นฐานที่อยู่ในกลุ่ม ตัวอย่างต่อไปนี้แสดงความสอดคล้องพื้นฐานสุดท้าย โดยรายการแบบยืดหยุ่นรายการแรกสอดคล้องกับบรรทัดสุดท้ายของข้อความในรายการที่ใหญ่กว่า รายการสุดท้ายในกลุ่มนี้สอดคล้องกับ flex-end ซึ่งเป็นส่วนท้ายของคอนเทนเนอร์ Flex

การจัดแนวสำรอง

หากเรื่องการตรวจสอบความสอดคล้องไม่มีกลุ่มการแชร์พื้นฐานที่จะปรับแนว ระบบจะใช้การจัดข้อความสำรอง สำหรับ baseline และ first baseline การจัดแนวสำรองคือ start และสำหรับ last baseline การจัดแนวสำรองคือ end