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

Rachel Andrew

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

Browser Support

• 123
• 123
• 125
• 17.4

align-content ในเลย์เอาต์ Flexbox และ Grid

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

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

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