关于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>参考网址:http://www.cnblogs.com/frankwong/p/4603141.html
作者：老子之乎者也
链接：https://www.jianshu.com/p/1b58280e6981
随时随地看视频
