溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css中的box-pack屬性怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css中的box-pack屬性怎么用”這篇文章吧。
cssbox-pack屬性定義及用法
1.box-pack屬性是css3新增屬性，是使用來規定當框大于子元素的尺寸，在何處放置子元素，目前主流瀏覽器都還不支持該屬性，但是一些瀏覽器有自己的私有屬性來實現box-pack屬性的效果。
2.InternetExplorer10可以使用-ms-flex-packproperty屬性來代替支持box-pack屬性，InternetExplorer10之前版本不支持該屬性。Firefox內核瀏覽器可以通過私有屬性-moz-box-pack屬性來代替支持box-pack屬性。Safari、Opera以及Chrome瀏覽器可以通過私有屬性-webkit-box-pack屬性來代替支持box-pack屬性；
cssbox-pack屬性語法格式
box-pack:start/end/center/justify;
屬性值說明
start：對于普通方向的boxes，左邊緣的第一個子元素被放置在左側（所有額外的空間放置后的最后一個子元素）。對于反向boxes，右邊緣最后一個子元素放置在右側（所有額外的空間放置前的第一個子元素）
end：對于正常的方向的boxes，最后一個子元素的右邊緣放置在右側（所有額外的空間放置前的第一個子元素）。對于反向boxes，第一個孩子的左邊緣放置在左側（所有額外的空間放置后的最后一個子元素）
center：額外的空間劃分均勻的兩半，前一半放置第一個子元素，另一半放置最后一個子元素
justify：額外的空間平均分配給每個子元素
實例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>css3box-pack屬性筆記</title>
<styletype="text/css">
body{background-color:#aaa;}
div{width:400px;height:100px;border:1pxsolidmediumvioletred;}
.box1{
display:box;/*W3C*/
display:-ms-flexbox;/*InternetExplorer10*/
display:-moz-box;/*Firefox*/
display:-webkit-box;/*Safari,Opera,andChrome*/
box-pack:center;/*W3C*/
-ms-flex-pack:center;/*InternetExplorer10*/
-moz-box-pack:center;/*Firefox*/
-webkit-box-pack:center;/*Safari,Opera,andChrome*/
}
.box2{
display:box;/*W3C*/
display:-ms-flexbox;/*InternetExplorer10*/
display:-moz-box;/*Firefox*/
display:-webkit-box;/*Safari,Opera,andChrome*/
box-pack:justify;/*W3C*/
-ms-flex-pack:justify;/*InternetExplorer10*/
-moz-box-pack:justify;/*Firefox*/
-webkit-box-pack:justify;/*Safari,Opera,andChrome*/
}
</style>
</head>
<body>
<divclass="box1"><p>1</p><p>2</p></div>
<divclass="box2"><p>1</p><p>2</p></div>
</body>
</html>
以上是“css中的box-pack屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
