รองรับการปรับแนวเนื้อหาในเลย์เอาต์บล็อกและตาราง

ตั้งแต่ Chrome 123 คุณจะใช้พร็อพเพอร์ตี้ align-content จากการจัดแนวกล่อง CSS ได้กับเลย์เอาต์บล็อกและตาราง ซึ่งจะช่วยให้จัดแนวทิศทางของบล็อกได้โดยไม่ต้องสร้างเลย์เอาต์แบบ Flex หรือตารางกริด อย่างไรก็ตาม คุณอาจต้องอัปเดต CSS หากใช้ align-content นอกวิธีการวางเลย์เอาต์เหล่านี้ เนื่องจากตอนนี้ align-content จะมีผล

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

align-content ในเลย์เอาต์แบบยืดหยุ่นและตารางกริด

คุณอาจใช้ align-content เพื่อจัดแนวรายการ Flex หรือแทร็กตารางกริด ในเลย์เอาต์ Flex ระบบจะใช้พร็อพเพอร์ตี้ align-content ในคอนเทนเนอร์ Flex เพื่อจัดแนวรายการ Flex ในแกนไขว้ ในตัวอย่างต่อไปนี้ ค่าของ flex-grow คือ space-between ดังนั้นจึงกระจายพื้นที่ว่างในคอนเทนเนอร์ Flex ระหว่างแถว Flex

พร็อพเพอร์ตี้ align-content จะเว้นระยะห่างระหว่างแถวของรายการ Flex เนื่องจากคอนเทนเนอร์ Flex มีที่ว่างเหลืออยู่ในแกนไขว้

จัดรายการให้อยู่กึ่งกลางในแนวตั้ง

align-content จะมีประโยชน์อย่างยิ่งในการวางรายการในแนวตั้งให้อยู่ตรงกลางภายในคอนเทนเนอร์ โดยให้ใช้ display: flex ร่วมกับ align-content: center ซึ่งจะทำให้รายการกลายเป็นรายการ Flex และลักษณะการทำงานเริ่มต้นอื่นๆ ของรายการ Flex จะมีผลด้วย ในตัวอย่างต่อไปนี้ หัวเรื่องอยู่ตรงกลางแนวตั้งด้วย align-content: center ซึ่งทำให้รายการหดเพื่อให้พอดีกับเนื้อหา คุณจึงต้องใช้ flex-grow: 1 กับรายการ

พร็อพเพอร์ตี้ align-content จะจัดกึ่งกลางส่วนหัวในแนวตั้งภายในคอนเทนเนอร์ Flex

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

พร็อพเพอร์ตี้ align-content จะจัดหัวเรื่องให้อยู่ตรงกลางในแนวตั้งภายในคอนเทนเนอร์บล็อก (ต้องใช้ Chrome 123 หรือ Safari 17.4 ขึ้นไป)

ทดสอบการรองรับ align-content ในเลย์เอาต์บล็อก

ขออภัย คุณไม่สามารถทดสอบการรองรับ align-content ในเลย์เอาต์แบบบล็อกได้ เนื่องจาก align-content ได้รับการสนับสนุนมาอย่างยาวนานในเลย์เอาต์ Flex และตารางกริด การใช้การค้นหาฟีเจอร์ที่มี @supports จะแสดงผลเป็น "จริง" เสมอ นี่เป็นสถานการณ์เดียวกับที่เกิดขึ้นกับพร็อพเพอร์ตี้ gap ใน Flexbox กลุ่มทํางาน CSS กำลังสํารวจโซลูชันสําหรับการติดตั้งใช้งานบางส่วนเช่นนี้

ตรวจสอบเว็บไซต์เพื่อหาการจัดแนวที่ไม่คาดคิด

พร็อพเพอร์ตี้ align-content ได้รับการกําหนดมาหลายปีแล้วในข้อกําหนดว่าใช้กับเลย์เอาต์บล็อก เนื่องจากไม่มีเบราว์เซอร์ที่รองรับ align-content นอกบริบทเหล่านี้ การดำเนินการจึงไม่มีการดำเนินการใดๆ อย่างไรก็ตาม หากคุณเพิ่มพร็อพเพอร์ตี้ลงในองค์ประกอบที่ไม่ใช่คอนเทนเนอร์ Flex หรือตารางกริด พร็อพเพอร์ตี้ดังกล่าวจะเริ่มมีผลตั้งแต่ Chrome 123 ค้นหาการใช้ align-content ใน CSS และใช้เวอร์ชันเบต้าเพื่อทดสอบเว็บไซต์และแอปพลิเคชันของคุณ หากปัญหานี้อาจเกิดขึ้นกับคุณ