css3弹性盒子模型之box-flex(二)

由于时间关系,在上一篇文章《css3弹性盒子模型之box-flex(修正版一)》里写了关于box-flex如何对父容器的宽度进行划分分配,但是还没讲解完毕,在这一节里我将继续补充上一节的内容。

二、box属性

4、box-pack

box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:

start | end | center | justify

css代码

.box {
	display:box;
	display:-webkit-box;
	display:-moz-box;
	background-color:#fff;
	width:500px;
	border:1px solid #333;
	margin:0 auto;
	height:100px;
	-webkit-box-pack:start;
	-moz-box-pack:start;
	box-pack:start;
}
.col_1,.col_2,.col_3{
	width:100px;
}

start:在box-pack表示水平居左对齐,如下所示:

box-pack属性start

end:在box-pack表示水平居右对齐,如下图所示

box-pack属性end

center:在box-pack表示水平居中对齐,如下图所示

box-pack属性center

justify:在box-pack表示两边对齐试(firefox不支持,它保持默认效果),如下图所示

 

马上分享给你的朋友吧~

css3弹性盒子模型之box-flex(二)》上有 3 条评论

  1. 你好,我有一个问题想请教下,

    我用你上面的布局来做写css,

    在孩子标签中, 我用text-align:right 来设置标签中问题的对齐方式。

    其中chrome 是支持的,但firefox 不支持!

    你有遇到过类似情况吗?有好的解决方法吗?

    • 是在子标签里面用text-align:right 吗?我这试了一下,火狐下面是正常的。不知道你遇到的是什么问题?你再测试一下,或者是火狐的版本问题。

  2. 你好,我有个问题想请教下,
    父层我设置宽度600px,
    三个子层,分别是,3,2,1分配,
    最后宽度比例出现:283px,200px,117px
    而不是300px,200px,100px这样的值,
    想说,这个计算规则是怎样的?