刚开始做网页时就有一个困惑,为什么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,得到的效果如图:
首先比较与传统display:block的不同:
- 子元素按照水平排列
- 子元素的宽度没填充
- 子元素的高度填充了
好像就是由display:block的垂直排列转换到了display:box的水平排列。但display:box的功能更加强大,上面三个行为都是可以单独控制的。
- 由box-orient控制,默认inline-axis(===horizontal),可设置为block-axis(===vertical)
article {
display: -webkit-box;
height: 100%;
/* 注意这里加前缀的使property,前面是value*/
-webkit-box-orient: vertical;
}效果图:
- 由box-flex控制,这个作用于子元素,让子元素具备‘弹性’,具备‘弹性’的子元素可以伸缩到充满父元素
比如我们把第一个子元素的‘弹性’设置为1article div:nth-child(1) {
background: red;
-webkit-box-flex: 1;
}效果图:
把所有子元素的‘弹性’设置为1,由于大家的弹性一样,所以宽度一样article div {
-webkit-box-flex: 1;
}效果图:
把第一个子元素的‘弹性’设置为2,其他的维持1不变,由于第一个子元素的‘弹性’是其他子元素的两倍,所以占位也是其他子元素的两倍。就是把老爸的财产分成4份,老大独占2份,老二和老三各得1份。article div:nth-child(1) {
background: red;
-webkit-box-flex: 2;
}效果图:
乍看一下是对的,但凡事就怕认真fanjian二字。打开F12,看了下width,老二和老三一个是344px,另一个是359px。(老二:就因为我叫老二么)。
原因出在哪里?出在元素的innerHTML,一个是abc三个字符,一个是tarol五个字符。就像一个弹簧,弹性是一样的,但一个比另一个多两节,拉伸的长度能一样么?处理方式是将所有赋予box-flex属性的子元素全部加上:width:0article div {
-webkit-box-flex: 1;
width: 0;
}现在对比下,发现是一样的了,或者有1px的差别(老爸:咱一个钢镚就别剁成两瓣了)
- 由box-align控制,默认是stretch,即填充。可选值是start/end/center/baseline。
先把之前的flex全部取消掉,然后将可选值赋给父元素,效果图分别如下
start/baseline:
end:
center:
总结一下,当box-orient为horizontal时,box-align定义子元素的垂直位置,当box-orient为vertical时,box-align定义子元素的水平位置 - 说到box-align,就不得不说box-pack,它的作用和box-align是相辅相成的。取值范围也相似:start(default)/end/center/justify。
将box-align设置为start,对box-pack分别取值,得到的效果如下:
end:
center:
justify:
同样总结下,当box-orient为horizontal时,box-pack定义子元素的水平位置,当box-orient为vertical时,box-pack定义子元素的垂直位置。从表现来看,box-pack更接近text-align的意义,而box-align更接近vertical-align。 - box-direction,显示子元素的顺序,类似css中的direction,可选值normal(default)/reserve
删除其他的css property,回归到原始状态,给父元素添加box-direction: reserve,效果图如下:
- 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;
}效果图:
同时设置box-direction,则同样进行逆向显示
-
box-flex-group,作用于子元素,为子元素设定‘弹性’功能的分组。默认为1,也就是都在第一组。
为第一个元素的box-flex-group赋值为2article > 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;
}效果让人震惊,老大不见了:
因为对box-flex-group的定义是这样的,父元素先分配给组序号大的子元素需要的空间,然后剩余空间全部交给组序号小的子元素去‘弹’。
就是说,老爸的财产老大要多少给多少,剩下的其他人去分,那老大要多少?他说了:我什么都不要(width:0),所以没有了。(老大:我没说啊)
修改下第一个子元素的widtharticle > div:nth-child(1) {
background: red;
-webkit-box-flex-group:;
width: 200px;
}效果如下:
老大又说了:妈蛋有这种好事,那我全要!article > div:nth-child(1) {
background: red;
-webkit-box-flex-group:;
width: 100%;
}然后:
然后他就被揍了。
每次写完一篇,总有一种好像漏写了什么的感觉。年过完了,也一个多月没更新了,这篇作为开始吧。