css3中webkit-box的⽤法（平分⽗元素）
；是新添加的盒⼦模型属性，它的出现可以解决们通过N多结构、实现的布局⽅式。经典的⼀个布局应⽤就是布局的垂直等⾼、⽔平均分、按⽐例划分。
⽬前属性还没有得到firefox、Opera、chrome浏览器的完全⽀持，但可以使⽤它们的私有属性定义firefox(-moz-)、opera(-o-)、
chrome/safari（-webkit-)。
注意：其⼦容器必须是block；块元素才能运⽤此样式，否则⽆效；
⼀、box-flex属性
box-flex主要让⼦容器针对⽗容器的宽度按⼀定规则进⾏划分
html代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.
sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:green;
}
展⽰效果：
说明：
必须给⽗容器wrap定义css属性display:box其⼦容器才可以进⾏划分(如果定了display:box则该容器则定义为了内联元素，使⽤margin:0px auto让其居中是⽆效的，要想使其居中只能通过它的⽗容器的text-align:center)；分别给sectionOne、sectionTwo、sectionThree的box-flex设置了3、2、1，也就是
说这三个⼦容器将⽗容器wrap的宽度600px分为6份，sectionOne占居⽗结构宽度的3/6即300px，sectionOne占居⽗结构宽度的2/6即200px，sectionThree占居⽗结构宽度的1/6即100px。
以上是按⽐例数进⾏划分分配的，如果其中⼀个⼦容器或多个⼦容器设置了固定宽度⼜会怎样划分那？
如果其中⼀个⼦容器或多个⼦容器设置了固定宽度，其它⼦容器没有设置，其计算⽅式是这样的：⼦容器如果设置了固定宽度值，该⼦容器则直接应⽤设置的宽度值，其它没有设置的则再⽗容器的宽度基础上减去⼦容器设置的固定宽度，在剩下的宽度基础上按⼀定⽐例进⾏划分分配。请看下⾯代码:
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-
webkit-box-flex:3;
box-flex:3;
borderbox}
background:purple;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionThree{
width:200px;//设置固定宽度
background:green;
}
展⽰效果：
说明：
sectionThree设置了固定宽度为200px，⽗容器的宽度600px减去改⼦容器的200px还剩下400px，这400px宽度值则按box-flex设置的值进⾏划分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代码的基础上给sectionTwo⼦容器添加margin:0px 50px使⼦容器之间产⽣⼀定的间隔其宽度⼜如何进⾏分配划分的那？接着看
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
margin:0px 50px;//添加margin属性
}
.sectionThree{
width:200px;
background:green;
}
展⽰效果：
说明：
⽗容器的宽度600px减去设置了⼦容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进⾏划
分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。
⼆、box属性
上⾯”css3弹性盒⼦模型之box-flex”将box-flex如何对⽗容器的宽度进⾏划分分配讲解完毕，下⾯在看⼀下⽗容器⾥⾯的box属性包括哪些box 属性，具体属性如下代码所⽰：
box-orient | box-direction | box-align | box-pack | box-lines
1、box-orient
box-orient(orient译为排列更准确)⽤来确定⽗容器⾥⼦容器的排列⽅式，是⽔平还是垂直。可选属性如下所⽰：
horizontal | vertical | inline-axis | block-axis | inherit
horizontal、inline-axis说明：
给box设置horizontal或inline-axis属性其效果似乎表现⼀致，都可将⼦容器⽔平排列，具体两者有什么实质差别暂时还没有搞清楚。如果⽗容器选择horizontal或inline-axis属性对⼦容器进⾏⽔平排列，其是对⽗容器的宽度进⾏分配划分。此时如果⽗容器定义了⾼度值，其⼦容器的⾼度值设置则⽆效状态，所有⼦容器的⾼度等于⽗容器的⾼度值；如果⽗容器不设置⾼度值，其⼦容器的⾼度值才有效并且取最⼤⾼度值的⼦容器的⾼度。
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;//⽔平排列
}
.sectionOne{
background:orange;
-
moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
vertical、block-axis说明：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现⼀致，都可将⼦容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果⽗容器选择vertical或block-axis属性对⼦容器进⾏垂直排列，其是对⽗容器的⾼度进⾏分配划分。此时如果⽗容器定义了宽度值，其⼦容器的宽度值设置则⽆效状态；如果⽗容器不设置宽度值，其⼦容器的宽度值才有效并且取最⼤宽度值的⼦容器的宽度。
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;//垂直排列
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-
webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
height:100px;
background:green;
}
inherit说明：
inherit属性则是让⼦容器继承⽗容器的相关属性。
2、box-direction
box-direction⽤来确定⽗容器⾥的⼦容器排列顺序，具体属性如下代码所⽰：
normal | reverse | inherit
normal是默认值
按照HTML⽂档⾥结构的先后顺序依次展⽰。如下代码，如果box-direction设置为normal，则结构依次展⽰sectionOne、sectionTwo、sectionThree.
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:normal;//设置mormal默认值
-webkit-box-direction:normal;//设置mormal默认值
box-direction:normal;//设置mormal默认值
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-
webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.sectionThree{
width:100px;
background:green;
}
reverse表⽰反转:
如上⾯所⽰设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-direction:reverse;//设置为反转
-webkit-box-direction:reverse;//设置为反转
box-direction:reverse;//设置为反转
}
.sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
.
sectionThree{
width:100px;
background:green;
}
3、box-align
box-align表⽰⽗容器⾥⾯⼦容器的垂直对齐⽅式，可选参数如下所⽰：
start | end | center | baseline | stretch
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:108px;
display:-moz-box;
display:-webkit-box;
-moz-box-align:stretch;
-webkit-box-align:stretch;
-o-box-align:stretch;
box-align:stretch;
}
.wrap section{
height:80px;
}
.wrap .sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.
wrap .sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
height:108px;
}
.wrap .sectionThree{
width:100px;
background:green;
}
3、box-pack
box-pack表⽰⽗容器⾥⾯⼦容器的⽔平对齐⽅式，可选参数如下所⽰：start | end | center | justify
HTML代码：
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码：
.wrap{
width:600px;
height:108px;
border:1px solid red;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-pack:end;
-webkit-box-pack:end;
-o-box-pack:end;
box-pack:end;
}
.wrap section{
width:100px;
}
.wrap .sectionOne{
background:orange;
}
.wrap .sectionTwo{
background:purple;
}
.wrap .sectionThree{
background:green;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论