标签归档:box-orient

CSS 3属性之盒布局box

本文讲解一下css3的盒布局如何使用。

在过去想做一个3列布局基本都是用float来实现,如下所示:

示例代码:

<style>
 .box {
     width: 600px;
     height: 300px;
     border: 1px solid #000;
 }
 .box1 {
     background-color: orange;
 }
 .box2 {
     background-color: yellow;
 }
 .box3 {
     background-color: limegreen;
 }
 .box1, .box2, .box3 {
     float: left;
 }
 </style>
<div class="box">
   <div class="box1">
      这里是第一区域<br>
   </div>
   <div class="box2">
      这里是第二区域<br>
      这里是第二区域
   </div>
   <div class="box3">
      这里是第三区域<br>
      这里是第三区域<br>
      这里是第三区域
   </div>
</div>

示例图片:

css3盒布局

虽然实现了三列布局,但是想实现3列高度动态相同就要废点小劲了,如果改用css3盒布局的话,这个问题将很容易得到解决。

1.使用盒布局

样例代码:

<style>
 .box {
     width: 600px;
     height: 300px;
     border: 1px solid #000;
     display: box;  /* 目前使用时需要加上-webkit-、-mox-,display: -webkit-box */
 }
 .box1 {
     background-color: orange;
 }
 .box2 {
     background-color: yellow;
 }
 .box3 {
     background-color: limegreen;
 }
 .box1, .box2, .box3 {
     /*float: left;*/
 }
 </style>

样例图片:

css3 盒布局

 

可见使用css3盒布局制作自适应等高三列布局非常简单方便。

2.改变元素的显示顺序使用

使用盒布局的时候,可以通过box-ordinal-group属性来改变各元素的显示顺序。可以在每个元素的样式中加上box-ordinal-group属性,该属性使用一个表示序号的整数属性值,浏览器现实的时候根据该序号从小到大来显示这些元素。使用Firefox时需要将其书写成“-moz-box-ordinal-group”的形式;如果使用Safari浏览器或Chrome浏览器,需要书写成“-webkit-box-ordinal-group” 的形式

样例代码:

<style>
.box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: box;
    display: -webkit-box;
}
.box1 {
    background-color: orange;
    -webkit-box-ordinal-group: 2;
}
.box2 {
    background-color: yellow;
    -webkit-box-ordinal-group: 3;
}
.box3 {
    background-color: limegreen;
    -webkit-box-ordinal-group: 1;
}
</style>

样例图片:

css3 盒布局

3.改变元素的排列方向

使用弹性盒布局的时候,我们可以很简单的将多个元素的排列方向从水平修改为垂直方向,或者从垂直方向修改为水平方向。

在css3中,使用box-orient来指定多个元素的排列方向。如果使用Firefox浏览器,写成”-moz-box-orient”,如果使用Safari或者Chrome浏览器,写成“-webkit-box-orient”的形式;

样例代码:

<style>
 .box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: box;
    display: -webkit-box;
    -webkit-orient: vertical;
 }
 .box1 {
    background-color: orange;
 }
 .box2 {
    background-color: yellow;
 }
 .box3 {
    background-color: limegreen;
 }
 </style>

样例图片:

css 3 盒布局

通过观察以上测试用例,都有一个共同的特点就是每个盒子中都留有一块空白,可以通过box-flex来解决这个问题,我们给box2设置-webkit-box-flex:1;

样例代码:

<style>
 .box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
 }
 .box1 {
    background-color: orange;
 }
 .box2 {
    background-color: yellow;
    -webkit-box-flex: 1;
 }
 .box3 {
    background-color: limegreen;
 }
 </style>

样例图片:

css3 盒布局 box-flex

 

如图所示,之前剩余的空白区域都填充在设置了box-flex:1的第二区域了,这样就实现了高度上动态自适应了,下一步我们同时给第三区域也设置上box-flex:1看看会是怎样的效果

样例代码:

<style>
 .box {
    width: 600px;
    height: 300px;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
 }
 .box1 {
    background-color: orange;
 }
 .box2 {
    background-color: yellow;
    -webkit-box-flex: 1;
 }
 .box3 {
    background-color: limegreen;
    -webkit-box-flex: 1;
 }
 </style>

样例图片:

css 3 盒布局 box-flex

 

可以看到第二区域和第三区域共同分担了空白区域,因为它们设置的box-flex都等于1,所以它们平分了空白区域的面积。

这里解释一下box-flex的工作原理,box-flex是用来占据盒子中空白区域的,假设一共有3个子元素分别设置了box-flex:1、box-flex:2、box-flex:3,那么它们所占有的空白区域的面积分别是1/(1+2+3)、2/(1+2+3)、3/(1+2+3),很多情况下很多人会误解box-flex,认为它在计算面积时是按照盒子总面积计算的,所以就会直接认为子元素会按照box-flex的比例来分割盒子的总面积,实际上并不是这样的,现在我们给第一区域、第二区域、第三区域分别设置box-flex等于1,请看下图:

css 3盒布局 box-flex

很明显三个区域的高度并不相同,但是仔细看可以发现3个区域的空白区域的高度都是相同的,原因就是区域总高度不同因为每个区域中内容各自占了不同的高度,空白区域高度相同的原因是它们的box-flex都等于1,所以它们平分了原本应该存在的空白区域。

总之关于box-flex的问题记住一句话就行:它们按照比例分割的是空白区域的面积,而不是盒子的总面积!