[css3] display:box 实现子元素居中与宽比排列

△  box-flex主要让子容器针对父容器的宽度按一定规则进行划分。//可能已被display:flex  更新了用法

box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。

box-direction用来确定父容器里的子容器排列顺序。

box-align表示父容器里面子容器的垂直对齐方式。

box-pack表示父容器里面子容器的水平对齐方式。

 

实现子元素居中：

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

 

子元素按设定宽度比例排列：//可能已被display:flex  更新了用法?

father
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}

#son
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
border:1px solid red;
}

#son
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
border:1px solid blue;
}

转载于:https://www.cnblogs.com/qingmingsang/articles/4967904.html