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