จาก Chrome 123 คุณสามารถใช้พร็อพเพอร์ตี้ align-content จากการจัดแนวกล่อง CSS ในเลย์เอาต์บล็อกและตารางได้ การทำเช่นนี้จะช่วยให้สามารถจัดวางทิศทางแบบบล็อกได้โดยไม่ต้องสร้างเลย์เอาต์แบบ Flex หรือตารางกริด อย่างไรก็ตาม คุณอาจต้องอัปเดต CSS หากเคยใช้ align-content นอกวิธีเลย์เอาต์เหล่านี้เนื่องจากตอนนี้จะมีผลแล้ว
การสนับสนุนเบราว์เซอร์
- 123
- 123
- 125
- 17.4
align-content ในเลย์เอาต์แบบยืดหยุ่นและตารางกริด
คุณอาจใช้ align-content เพื่อจัดรายการ Flex หรือแทร็กตารางกริด ในเลย์เอาต์แบบยืดหยุ่น ระบบจะใช้พร็อพเพอร์ตี้ align-content ในคอนเทนเนอร์ Flex เพื่อปรับแนวรายการ Flex บนแกนข้าม ในตัวอย่างต่อไปนี้ มีค่าเป็น space-between เพื่อกระจายพื้นที่ว่างที่มีอยู่ในคอนเทนเนอร์ Flex ระหว่างแถว Flex
align-content เว้นช่วงแถวของรายการ Flex เนื่องจากคอนเทนเนอร์ Flex มีการเว้นวรรคในแกนกากบาทจัดรายการให้อยู่กึ่งกลางในแนวตั้ง
โดยที่ align-content มีประโยชน์อย่างยิ่งในการจัดให้รายการอยู่กึ่งกลางในแนวตั้งภายในคอนเทนเนอร์ หากต้องการทำเช่นนี้ ให้ใช้ display: flex ร่วมกับ align-content: center การดําเนินการนี้จะทําให้รายการกลายเป็นรายการแบบยืดหยุ่น และลักษณะการทำงานเริ่มต้นของรายการแบบยืดหยุ่นอื่นๆ ก็จะมีผลด้วย ในตัวอย่างต่อไปนี้ ส่วนหัวอยู่ตรงกลางในแนวตั้งด้วย 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 เป็นต้นไป ค้นหา CSS เพื่อใช้ align-content และใช้รุ่นเบต้าเพื่อทดสอบเว็บไซต์และแอปพลิเคชันหากอาจเป็นกรณีนี้