css box-pack属性如何用
css box-pack属性定义及用途
1.box-pack属性是css3新增属性,是使用来规定当框大于子元素的尺寸,在何处放置子元素,当前主流阅读器都还不支撑该属性,但是一些阅读器有本人的私有属性来实现box-pack属性的结果。
2.Internet Explorer 10可以使用-ms-flex-pack property属性来代替支撑box-pack属性,Internet Explorer 10此前版本不支撑该属性。Firefox内核阅读器可以通过私有属性-moz-box-pack属性来代替支撑box-pack属性。Safari、Opera乃至Chrome阅读器可以通过私有属性 -webkit-box-pack属性来代替支撑box-pack属性;
css box-pack属性语法格局
box-pack: start/end/center/justify;
属性值说明
start :关于一般标的目的的boxes,左边沿的第一个子元素被放置在左侧(所有额外的空间放置后的最后一个子元素)。关于反向boxes,右侧缘最后一个子元素放置在右侧(所有额外的空间放置前的第一个子元素)
end:关于正常的标的目的的boxes,最后一个子元素的右侧缘放置在右侧(所有额外的空间放置前的第一个子元素)。关于反向boxes,第一个孩子的左边沿放置在左侧(所有额外的空间放置后的最后一个子元素)
center:额外的空间划分平均的两半,前一半放置第一个子元素,另一半放置最后一个子元素
justify:额外的空间均匀分配给每个子元素
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css3 box-pack属性笔记</title> <style type="text/css"> body{background-color: #aaa;} div{width: 400px;height: 100px;border:1px solid mediumvioletred;} .box1{ display:box;/* W3C */ display:-ms-flexbox;/* Internet Explorer 10 */ display:-moz-box;/* Firefox */ display:-webkit-box;/* Safari, Opera, and Chrome */ box-pack:center;/* W3C */ -ms-flex-pack:center;/* Internet Explorer 10 */ -moz-box-pack:center;/* Firefox */ -webkit-box-pack:center;/* Safari, Opera, and Chrome */ } .box2{ display:box;/* W3C */ display:-ms-flexbox;/* Internet Explorer 10 */ display:-moz-box;/* Firefox */ display:-webkit-box;/* Safari, Opera, and Chrome */ box-pack:justify;/* W3C */ -ms-flex-pack:justify;/* Internet Explorer 10 */ -moz-box-pack:justify;/* Firefox */ -webkit-box-pack:justify;/* Safari, Opera, and Chrome */ } </style> </head> <body> <div class="box1"><p>1</p><p>2</p></div> <div class="box2"><p>1</p><p>2</p></div> </body> </html>
运转结果
以上就是css box-pack属性如何用的具体内容,更多请关注百分百源码网其它相关文章!