关于display:-webkit-box
前提:display:flex和display:-webkit-box都有排序的功能,但是Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式,需要注意的是如果要使用line-clamp时需要用display:box;
常见的flex-box属性
flex-box属性很多,记录一些常见的属性;
用于父元素的样式
display:box;该属性会将此元素及其直系子代加入弹性框模型中,(Flexbox模型只适用直系子代)
box-orient:horizontal | vertical | inherit;该属性定义父元素的子元素如何排列
box-pack:start | end | center | justify;设置沿box-orient轴的父元素中子元素的排列方式。和flex的主轴差不多,对应justify-content
box-align:start | end | center | baseline | strech; 对应align-items align-content
用于子元素的样式
box-flex:0 | 任意数字;该属性让子容器针对父容器的宽度按一定的规划进行划分
示例
<style>
*{
margin: 0;
padding: 0;
}
.parent{
width: 400px;
height: 600px;
display: -moz-box;
display: -webkit-box;
-webkit-box-orient: vertical;/* 竖向排列 */
-moz-box-orient:vertical;
}
.child-one{
background: lightblue;
flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.child-two{
background: lightgray;
flex: 2;
-webkit-box-flex: 2;
-moz-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>
