弹性布局有以下样式
(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;
}
(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;
}
本文详细介绍了弹性布局的基础样式属性,包括display、box-orient、box-pack等,并通过具体示例展示了如何使用这些属性来实现水平和垂直方向上的布局效果。
1193

被折叠的 条评论
为什么被折叠?



