flexbox彈性盒子布局

 

混合划分

demo1，css：

 #demo1{
            width: 100%;
            background: #ccc;
            display: -webkit-flex;/*表示使用彈性布局*/
        }

        #demo1 .item{
            flex: 1;/*占容器的比例*/
            text-align: center;
            background:#00ff00;
            color: #000;
            padding: 5px;
            margin-left: 2px;
        }

        #demo1 .item2{
             flex: 2;/*占容器的比例*/
            text-align: center;
            background:#0000ff;
            color: #000;
            padding: 5px;
            margin-left: 2px;
        }

        #demo1 .item3{
             width:100px;
            text-align: center;
            background:#ee00ff;
            color: #000;
            padding: 5px;
            margin-left: 2px;
        }

demo1，html

  <div id="demo1">
        <div class="item">
            flex:1
        </div>
        <div class="item">
            flex:1
        </div>
        <div class="item2">
            flex:2
        </div>
        <div class="item3">
            我只有100px
        </div>
    </div>

實踐demo1，看看效果。

 

不定寬高，水平垂直居中

方法1：可實現屏幕的水平垂直居中

demo2，css（1）

#demo2{
            position: absolute;
            top: 50%;
            left:50%;
            z-index: 3;
            -webkit-transform: translate(-50%,-50%);
            border-radius: 6px;
            background:#00ff00;
            border:1px solid #000;
        }

demo2，html（1）

<div id="demo2">
        <p>不定寬高的水平垂直居中</p><br/>方法1
    </div>

方法2：似乎不可實現屏幕的水平垂直居中，只能實現某個容器內的水平垂直居中(容器最好是有寬高)

demo2，css(2)

 #demo3{
    width:100%;
    height: 600px;
    background:#ccc;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;/*表示使用彈性布局*/
 }

#demo3 .item{
            /*設計item是個圓形*/
            width:50px;
            height:50px;
            border-radius: 50px;
            background:#000;
            border:1px solid red;
        }

demo2,html(2)

<div id="demo3">   <span class="item"></span> </div> 

實踐demo2，看看效果

 

！！補充：

兼容性

1，ios可以使用最新flex布局

2，Android4.4以下只能兼容舊版本的flexbox布局

3，Android4.4及以上，可以使用最新的flex布局

所以，建議使用舊版本兼容性的flexbox布局。

屬性替換如下：

新flex布局	舊flexbox布局
display: -webkit-flex;	display: -webkit-flex-box;
justify-content: center;	box-pack: center;
-webkit-flex:1	-webkit-flex-box:1
align-items: center;	box-align: center;