CSS3 คุณสมบัติกล่องแพ็ค
ตัวอย่าง
องค์ประกอบลูกของ div ที่ใช้ทั้งกล่อง-align และคุณสมบัติกล่องแพ็คเป็นศูนย์กลาง:
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
ลอง»
สนับสนุนเบราว์เซอร์
เบราว์เซอร์หลักในปัจจุบันไม่สนับสนุนแอตทริบิวต์กล่องแพ็ค
Internet Explorer 10 โดยใช้อสังหาริมทรัพย์ -ms-Flex แพ็คสนับสนุนแทน
Firefox โดยทรัพย์สินส่วนตัว - การสนับสนุน MOZ กล่องแพ็ค
Safari, Opera และ Chrome ผ่านคุณสมบัติการสนับสนุน -webkit กล่องแพ็คส่วนตัว
หมายเหตุ: Internet Explorer 9 และรุ่นก่อนหน้าของ IE ไม่สนับสนุนกล่องที่มีความยืดหยุ่น
แอตทริบิวต์คำจำกัดความและคำแนะนำ
แอตทริบิวต์กล่องแพ็คระบุเมื่อองค์ประกอบของเด็กจะอยู่ในกล่องขององค์ประกอบเด็กมีขนาดเล็กกว่ากล่อง
คุณลักษณะนี้ระบุกรอบข้ามตำแหน่งแนวนอน, แนวตั้งของกรอบแนวตั้ง
| เริ่มต้น: | เริ่มต้น |
|---|---|
| มรดก: | ไม่ |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | วัตถุ .style.boxPack = "center" |
ไวยากรณ์
box-pack: start|end|center|justify;
| ความคุ้มค่า | คำอธิบาย |
|---|---|
| เริ่มต้น | สำหรับทิศทางทั่วไปของกล่องที่เด็กคนแรกที่จะวางอยู่ในขอบด้านซ้ายของทางด้านซ้าย (องค์ประกอบสุดท้ายของเด็กทุกพื้นที่พิเศษหลังจากยืน) สำหรับกล่องกลับขอบด้านขวาขององค์ประกอบของเด็กที่ผ่านมาจะถูกวางไว้ที่ด้านขวา (ทุกพื้นที่พิเศษถูกวางไว้ก่อนที่จะมีองค์ประกอบของเด็กแรกของ) |
| ปลาย | สำหรับกล่องทิศทางปกติองค์ประกอบลูกสุดท้ายของขอบด้านขวาวางไปทางขวา (ลูกคนแรกของทุกพื้นที่พิเศษก่อน) สำหรับกล่องกลับลูกคนแรกของขอบด้านซ้ายบนด้านซ้าย (องค์ประกอบสุดท้ายของเด็กทุกพื้นที่พิเศษหลังจากยืน) |
| ศูนย์ | พื้นที่พิเศษจะแบ่งกันเป็นสองส่วนในครึ่งแรกถูกวางลูกคนแรกวางอีกครึ่งหนึ่งขององค์ประกอบของเด็กที่ผ่านมา |
| แสดงให้เห็นถึง | พื้นที่เพิ่มเติมเฉลี่ยจัดสรรให้แต่ละองค์ประกอบย่อย |