resize属性

resize属性规定是否可由用户调整元素的尺寸。

若希望此属性生效，需设置元素的overflow:auto/hidden/scroll。

resize:none | both | horizontal | verticalnone用户无法调整元素的尺寸；both用户可以调整元素的高度和宽度；horizontal用户可调整元素的宽度；vertical用户可调整元素的高度。

示例如下：

    <style>
        .resize1{
            width:200px;
            height:200px;
            resize:both;
            overflow:auto;
            background-color:fuchsia;
        }
    </style>
    <div class="resize1"></div>

box-flex属性

通过box-flex属性可以让子容器针对父容器的宽度按一定比例进行划分。

使用时父级必须设置display:box;

Chrome必须添加-webkit-前缀才会生效

box-orient定义子容器的排列方式

box-orient:horizontal | verticalhorizontal子容器水平排列；vertical子容器垂直排列。

box-derection定义子容器的排列顺序

box-direction:normal | reversenormal正常的，按照从左到右或从上到下；reverse反转，从右到左或从下到上。

box-align子容器的垂直对齐方式

box-align:start | center | endstart(默认)居顶对齐；center居中对齐；end居底对齐。

box-pack子容器的水平对齐方式

box-pack:start | center | end | justifystart(默认)居左对齐；center居中对齐；end居右对齐；justify水平等分父容器的宽度。

    <style>
        div.tanxingbuju{
            height:500px;
            color:black;
            font-size:20px;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-box-direction:reverse;
        }
        .tanxingbuju div{
            margin:0;
            padding:0;
        }
        .tanxingbuju > div:nth-child(1){
            -webkit-box-flex:1;
            background-color:pink;
        }
        .tanxingbuju > div:nth-child(2){
            -webkit-box-flex:4;
            display:-webkit-box;
            -webkit-box-orient:horizontal;
            -webkit-box-align:center;
            -webkit-box-direction:normal;
            background-color:aqua;
        }
        .tanxingbuju > div:nth-child(3){
            -webkit-box-flex:1;
            background-color:lime;
        }
        .tanxingbuju > div > div:nth-child(1){
            -webkit-box-flex:2;
            background-color:red;
            height:150px;
        }
        .tanxingbuju > div > div:nth-child(2){
            -webkit-box-flex:3;
            background-color:olive;
            height:80px
        }
    </style>
    <div class="tanxingbuju">
        <div>第一</div>
        <div>
            <div>左</div>
            <div>右</div>
        </div>
        <div>第三</div>
    </div>

    
    

        
第一
        

            
左
            
右
        
        
第三