登录 注册

浮动什么的都是渣渣~

最近也是很久没做前端了(当然体力活不计入此内),最近开始刷微博了,在微博上看到了一篇文章写的是css3里面的box布局

事实上对于CSS3和HTML5我学过的内容并不多,因为在我学前端的巅峰(巅峰个P啊)时期,也就是三年前,这些新技术仍然在萌芽阶段.然而现在老本早就已经吃完了,必须得开始补充一些新技术了

首先贴一个链接

http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/

(人家10年就在搞的东西我到现在才开始搞,落后了整整5年啊啊啊)

首先是最基本的东西,利用display:box就可以达成最简单的横排布局


<div class="outer">
	<div class="inner in1">啊啊啊</div>
	<div class="inner in2">不不不</div>
	<div class="inner in3">擦擦擦</div>
</div>
CSS部分:



.outer{
	display:-webkit-box;
	-webkit-box-orient:horizontal;
}
(由于用chrome测试,所以只含有webkit部分)


结果如上

接下来是box-flex属性

简单的说,就是内部元素的宽度,比如说在上面的东西后加上

.in1{
	background:blue;
	-webkit-box-flex:2;
}
.in2{
	background:yellow;
	-webkit-box-flex:3;
}
.in3{
	background:red;
	-webkit-box-flex:4;
}
就会这样



可以看出蓝色的in1宽度是in3的一半

如果其中部分元素没有设定box-flex,则这个元素会变成自身宽度,由其余元素均分剩余

比如说我们把in1的box-flex去掉


然后还可以给子元素设定box-ordinal-group

.in1{
	background:blue;
	-webkit-box-flex:2;
	-webkit-box-ordinal-group:2;
}
.in2{
	background:yellow;
	-webkit-box-flex:3;
	-webkit-box-ordinal-group:1;
}
.in3{
	background:red;
	-webkit-box-flex:4;
	-webkit-box-ordinal-group:3;
}
结果是这样



意思就是box-ordinal-group越小的元素会显示在越前面

而不设定box-ordinal-group的话,默认值测试下来似乎是1,也不知道对不对

(不过这不是重点啊)

接下来是box-pack

比如我们把外层元素设定为justify

.outer{
	display:-webkit-box;
	-webkit-box-orient:horizontal;
	-webkit-box-pack:justify;
}
然后注意要把内层的box-flex去除

就会这样


总体而言display:box还是一个很好的新属性,可以很方便的用于制作横排布局,而之前的float什么的相比而言都是渣渣,而更古老的table就更加是渣渣了

至于box-orient还可以设定为vertical,这一点再慢慢研究~

2015
06 08
上一篇
Older
下一篇
Newer
评论
0
点击
713
发布
我是标题
我是文字
我是标题
我是文字
用户名
密码
用户名
密码
重复密码
努力的加载中.....