css box-pack属性怎样用【html5教程】

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>

运转效果