css3中webkit-box的⽤法
1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。⾄少width要⾃⼰去算百分⽐。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
提供的关于盒模型的⼏个属性：
box-orient          ⼦元素排列 vertical or horizontal
box-flex            兄弟元素之间⽐例，仅作⼀个系数
box-align            box 排列
box-direction        box ⽅向
box-flex-group      以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的⼦元素排列⽅向
box-pack
提供的关于盒模型的⼏个属性：
1、三列⾃适应布局，且有固定margin：
<style>
.wrap {
css实现三列布局display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-
webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
2、当⼀列定宽，其余两列分配不同⽐例亦可(三列布局，⼀列定宽，其余两列按1：2的⽐例⾃适应)：
<!DOCTYPE html>
<html>
<meta charset=”utf-8″ />
<style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.
child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.
flex2 {-webkit-box-flex: 2}
</style>
<div>
<div>200px</div>
<div>⽐例1</div>
<div>⽐例2</div>
</div>
</html>
3、下⾯是⼀个常见的web page 的基本布局：<!DOCTYPE html><html><meta charset=”utf-8″ /><style> header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.
w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style>
<div id=”doc”>
<header>Header</header>
  <div id=”content”>
    <section>定宽200</section>
    <section>⽐例3</section>
    <section>⽐例1</section>
  </div>
<footer>Footer</footer>
</div>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。