自適應布局webkit-box的用法

Flexible Box Model(靈活盒子模型)

在平常的web橫排布局中，會經常用到float或display:inline-block，但是在多種不同寬度的移動設備的自適應布局中用的話，還得設置百分比寬度和考慮清除浮動。而Flexible Box Model可以自動計算寬度和自適應，更加方便。 Flexible Box Model有幾個屬性：

1、box-orient          在父元素上設置   子元素排列 vertical (垂直) or horizontal（水平）

2、box-flex               在子元素上設置   兄弟元素之間比例，僅作一個系數

3、box-align             在父元素上設置    box 排列

4、box-direction    在父元素上設置    box 方向  可設置reverse排序相反

5、box-flex-group  在子元素上設置   以組為單位的流體系數

6、box-ordinal-group    以組為單位的子元素排列方向

7、box-pack              在父元素上設置   可設置center和vertically


以下是關於flexible box的幾個實例

1、三列自適應布局，且有固定margin

<style>
    *{
        margin:0;
        padding:0;
    }
    .wrap {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    .child {
        min-height: 200px;
        border: 2px solid #666;
        -webkit-box-flex: 1;
        margin: 10px;
        font-size: 100px;
        font-weight: bold;
        font-family: Georgia;
        -webkit-box-align: center;
    }
</style>
<div class="wrap">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

2、當一列定寬，其余兩列分配不同比例亦可(三列布局，一列定寬，其余兩列按1：2的比例自適應)：

<style>
    *{
        margin:0;
        padding:0;
    }
    .wrap {
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    .child {
        min-height: 200px;
        border: 2px solid #666;
        margin: 10px;
        font-size: 40px;
        font-weight: bold;
        font-family: Georgia;
        -webkit-box-align: center;
    }
    .w200 {width: 200px}
    .flex1 {-webkit-box-flex: 1}
    .flex2 {-webkit-box-flex: 2}
</style>

<div class="wrap">
    <div class="child w200">200px</div>
    <div class="child flex1">比例1</div>
    <div class="child flex2">比例2</div>
</div>

3、一個常見的web page 的基本布局：

<style>
    *{
        margin:0;
        padding:0;
    }
    header, footer, section {
    border: 10px solid #333;
    font-family: Georgia;
    font-size: 40px;
    text-align: center;
    margin: 10px;
    }
    #doc {
    width: 80%;
    min-width: 600px;
    height: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 0 auto;
    }
    header,
    footer {
    min-height: 100px;
    -webkit-box-flex: 1;
    }
    #content {
    min-height: 400px;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    }

    .w200 {width: 200px}
    .flex1 {-webkit-box-flex: 1}
    .flex2 {-webkit-box-flex: 2}
    .flex3 {-webkit-box-flex: 3}
</style>

<div id="doc">
    <header>Header</header>
    <div id="content">
        <section class="w200">定寬200</section>
        <section class="flex3">比例3</section>
        <section class="flex1">比例1</section>
    </div>
    <footer>Footer</footer>
</div>

 

更詳細的可以查看--->這里