老flex布局box

关于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