CSS3弹性盒模型 display:box

  刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式。这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应。bootstrap为了兼容性在实现栅格布局时,就不得不生成大量如下代码:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}

  好在有less,使代码量大减,比如:

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}

  而CSS3给出了直接的解决方案,就是display: box。当然这个CSS3属性如大多数没得到浏览器的直接支持,需要在box前面加上浏览器的前缀。

  给出最初的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
background: black;
}
article {
display: -webkit-box;
height: 100%;
}
article div {
}
article div:nth-child(1) {
background: red;
}
article div:nth-child(2) {
background: green;
}
article div:nth-child(3) {
background: blue;
}
</style>
</head>
<body>
<article>
<div>123</div>
<div>abc</div>
<div>tarol</div>
</article>
</body>
</html>

  打开chrome,得到的效果如图:

CSS3弹性盒模型 display:box

  首先比较与传统display:block的不同:

  1. 子元素按照水平排列
  2. 子元素的宽度没填充
  3. 子元素的高度填充了

  好像就是由display:block的垂直排列转换到了display:box的水平排列。但display:box的功能更加强大,上面三个行为都是可以单独控制的。

  1. 由box-orient控制,默认inline-axis(===horizontal),可设置为block-axis(===vertical)
    article {
    display: -webkit-box;
    height: 100%;
    /* 注意这里加前缀的使property,前面是value*/
    -webkit-box-orient: vertical;
    }

    效果图:
    CSS3弹性盒模型 display:box

  2. 由box-flex控制,这个作用于子元素,让子元素具备‘弹性’,具备‘弹性’的子元素可以伸缩到充满父元素
    比如我们把第一个子元素的‘弹性’设置为1
    article div:nth-child(1) {
    background: red;
    -webkit-box-flex: 1;
    }

    效果图:
    CSS3弹性盒模型 display:box
    把所有子元素的‘弹性’设置为1,由于大家的弹性一样,所以宽度一样

    article div {
    -webkit-box-flex: 1;
    }

    效果图:
    CSS3弹性盒模型 display:box
    把第一个子元素的‘弹性’设置为2,其他的维持1不变,由于第一个子元素的‘弹性’是其他子元素的两倍,所以占位也是其他子元素的两倍。就是把老爸的财产分成4份,老大独占2份,老二和老三各得1份。

    article div:nth-child(1) {
    background: red;
    -webkit-box-flex: 2;
    }

    效果图:
    CSS3弹性盒模型 display:box
    乍看一下是对的,但凡事就怕认真fanjian二字。打开F12,看了下width,老二和老三一个是344px,另一个是359px。(老二:就因为我叫老二么)。
    原因出在哪里?出在元素的innerHTML,一个是abc三个字符,一个是tarol五个字符。就像一个弹簧,弹性是一样的,但一个比另一个多两节,拉伸的长度能一样么?处理方式是将所有赋予box-flex属性的子元素全部加上:width:0

    article div {
    -webkit-box-flex: 1;
    width: 0;
    }

    现在对比下,发现是一样的了,或者有1px的差别(老爸:咱一个钢镚就别剁成两瓣了)

  3. 由box-align控制,默认是stretch,即填充。可选值是start/end/center/baseline。
    先把之前的flex全部取消掉,然后将可选值赋给父元素,效果图分别如下
    start/baseline:
    CSS3弹性盒模型 display:box
    end:
    CSS3弹性盒模型 display:box
    center: 
    CSS3弹性盒模型 display:box
    总结一下,当box-orient为horizontal时,box-align定义子元素的垂直位置,当box-orient为vertical时,box-align定义子元素的水平位置
  4. 说到box-align,就不得不说box-pack,它的作用和box-align是相辅相成的。取值范围也相似:start(default)/end/center/justify。
    将box-align设置为start,对box-pack分别取值,得到的效果如下:
    end: 
    CSS3弹性盒模型 display:box
    center: 
    CSS3弹性盒模型 display:box
    justify:
    CSS3弹性盒模型 display:box
    同样总结下,当box-orient为horizontal时,box-pack定义子元素的水平位置,当box-orient为vertical时,box-pack定义子元素的垂直位置。从表现来看,box-pack更接近text-align的意义,而box-align更接近vertical-align。
  5. box-direction,显示子元素的顺序,类似css中的direction,可选值normal(default)/reserve
    删除其他的css property,回归到原始状态,给父元素添加box-direction: reserve,效果图如下:
    CSS3弹性盒模型 display:box
  6. box-ordinal-group,box-direction可以逆向显示,box-ordinal-group则可以定义显示的具体次序,作用于子元素。
    article > div:nth-child(1) {
    background: red;
    -webkit-box-ordinal-group: 2;
    }
    article > div:nth-child(2) {
    background: green;
    -webkit-box-ordinal-group: 3;
    }
    article > div:nth-child(3) {
    background: blue;
    -webkit-box-ordinal-group: 1;
    }

    效果图:
    CSS3弹性盒模型 display:box

    同时设置box-direction,则同样进行逆向显示
    CSS3弹性盒模型 display:box

  7. box-flex-group,作用于子元素,为子元素设定‘弹性’功能的分组。默认为1,也就是都在第一组。
    为第一个元素的box-flex-group赋值为2

    article > div {
    -webkit-box-flex: 1;
    width: 0;
    }
    article > div:nth-child(1) {
    background: red;
    -webkit-box-flex-group: 2;
    }
    article > div:nth-child(2) {
    background: green;
    }
    article > div:nth-child(3) {
    background: blue;
    }

    效果让人震惊,老大不见了:

    CSS3弹性盒模型 display:box

    因为对box-flex-group的定义是这样的,父元素先分配给组序号大的子元素需要的空间,然后剩余空间全部交给组序号小的子元素去‘弹’。
    就是说,老爸的财产老大要多少给多少,剩下的其他人去分,那老大要多少?他说了:我什么都不要(width:0),所以没有了。(老大:我没说啊)
    修改下第一个子元素的width

    article > div:nth-child(1) {
    background: red;
    -webkit-box-flex-group:;
    width: 200px;
    }

    效果如下:
    CSS3弹性盒模型 display:box
    老大又说了:妈蛋有这种好事,那我全要!

    article > div:nth-child(1) {
    background: red;
    -webkit-box-flex-group:;
    width: 100%;
    }

    然后:
    CSS3弹性盒模型 display:box
    然后他就被揍了。

  每次写完一篇,总有一种好像漏写了什么的感觉。年过完了,也一个多月没更新了,这篇作为开始吧。

上一篇:Solr 4.0 部署实例教程


下一篇:CSS3盒模型display:box简述