可以使用display:-webkit-box布局来替代flex布局
文章来自:http://www.cnblogs.com/frankwong/p/4603141.html
一,-webkit-box属性讲解
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。
用于父元素的样式
属性 | 释义 |
---|---|
display: box; | 该属性会将此元素及其直系子代加入弹性框模型中。(Flexbox 模型只适用于直系子代) |
box-orient: horizontal/vertical/inherit; | 该属性定义父元素的子元素是如何排列的。 |
box-pack: start/end/center/justify; | 设置沿 box-orient 轴的父元素中子元素的排列方式。因此,如果 box-orient 是水平方向,则父元素的子元素是水平的排列方式,反之亦然。(表示父容器里面子容器的水平对齐方式–垂直排列时–定宽) |
box-align: start/end/center/baseline/stretch; | 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的,该属性就会决定垂直排列,反之亦然。(表示父容器里面子容器的垂直对齐方式–水平排列时–定高) |
用于子元素的样式
属性 | 释义 |
---|---|
box-flex: 0/任意数字; | 该属性让子容器针对父容器的宽度按一定规则进行划分。 |
二,使用举例
1,让.parent也水平居中的话,再复用一次box属性即可;child-one占了1/6;child-two占了2/6; child-three占了3/6;
html代码
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 500px;
height: 200px;
display: -webkit-box;
-webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */
}
.child-one{
background: lightblue;
-webkit-box-flex: 1;
}
.child-two{
background: lightgray;
-webkit-box-flex: 2;
}
.child-three{
background: lightgreen;
-webkit-box-flex: 3;
}
</style>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
<div class="parent">
<div class="child-one">1</div>
<div class="child-two">2</div>
<div class="child-three">3</div>
</div>
</div>
2,父容器的宽度500px减去设置了子容器的150px基础上再减去(100px+2×15px),这剩下的宽度值则按box-flex设置的值进行划分;
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 500px;
height: 200px;
display: -webkit-box;
-webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的,但是为了区分起见,加上该属性 */
}
.child-one{
background: lightblue;
-webkit-box-flex: 1;
}
.child-two{
background: lightgray;
-webkit-box-flex: 2;
}
.child-three{
background: lightgreen;
/* 加了固定高度和边距 */
width: 150px;
margin: 0 15px;
}
</style>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
<div class="parent">
<div class="child-one">1</div>
<div class="child-two">2</div>
<div class="child-three">3;width:150px;</div>
</div>
</div>
3,竖向排列跟横向排列,在原理上,并没有什么区别;
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 400px;
height: 600px;
display: -webkit-box;
-webkit-box-orient: vertical;/* 竖向排列 */
}
.child-one{
background: lightblue;
-webkit-box-flex: 1;
}
.child-two{
background: lightgray;
-webkit-box-flex: 2;
}
.child-three{
background: lightgreen;
/* 加了固定的高度和边距 */
height: 200px;
margin: 15px 0;
}
</style>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
<div class="parent">
<div class="child-one">1</div>
<div class="child-two">2</div>
<div class="child-three">3</div>
</div>
</div>
4,在水平方向上排列时,box-align:center;定义了垂直方向的居中;
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 400px;
height: 200px;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center; /* 水平 对应 box-align */
}
.child-one{
background: lightblue;
-webkit-box-flex: 1;
height: 100px;
}
.child-two{
background: lightgray;
-webkit-box-flex: 2;
height: 110px;
}
.child-three{
background: lightgreen;
-webkit-box-flex: 3;
height: 120px;
}
</style>
<div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000">
<div class="parent">
<div class="child-one">height: 100px;</div>
<div class="child-two">height: 110px;</div>
<div class="child-three">height: 130px;</div>
</div>
</div>