弹性布局(box-flax)

弹性布局有以下样式

(1),dispaly:-webkit-Box/-moz-box(用于父容器上)

(2),(-webkit-/-moz-)box-orient:horizontal/vertical(用于父元素)

(3),(-webkit-/-moz-)box-pack:center/justify(用于父元素)

(4),(-webkit-/-moz-)box-flax:N(用于子元素)

(5),(-webkit-/-moz-)box-direction:reverse(用于父元素)

(6),(-webkit-/-moz-)box-ordinal-group:N(用于子元素功能等同与5)

如:

.parent{

width:500px;

display:-webkit-box;

-webkit-box-orient:horizontal;

-webkit-direction:reverse;

-webkit-pack:center;

}

.child1{

-webkit-box-flax:1;

}

.child2{

-webkit-box-flax:2;

}

.child3{

-webkit-box-flax:2;

}

相关推荐