老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

作者：老子之乎者也
链接：https://www.jianshu.com/p/1b58280e6981