[ css 弹性盒子模型 box-flex-group属性 ] box-flex-group属性弹性盒子模型讲解及实例演示

讲解:

设置或检索弹性盒模型对象的子元素的所属组。动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余空间则均分给数值最小的那个组（可能有1个或多个元素）
实例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>webkit-flex-group demo</title>
<style type="text/css">
label {
    display: block;
    line-height: 30px;
}

li {
    padding: 10px 0;
}

.test {
    display: -webkit-box;
    width: 800px;
    height: 300px;
    margin: 20px auto 80px;
    padding: 10px;
    border: 1px solid #999;
    background-color: #CCC;
    -webkit-box-align: stretch;
}

.test div {
    text-align: center;
    color: #fff;
}

.flex_3 {
    -webkit-box-flex: 3;
    background-color: #A1D942;
}

.flex_2 {
    -webkit-box-flex: 2;
    line-height: 150px;
    background-color: #D8390C;
}

.flex_w200 {
    width: 200px;
    background-color: #20549D;
}

.flex_w300 {
    width: 300px;
}

.shadow_box {
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8);
}

.reflect_box {
    -webkit-box-reflect: below 10px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent),
        to(white) );
}
</style>
</head>
<body>

    <h1>-webkit-flex-group</h1>
    <dl id="control_panel" class="control_panel">

    </dl>

    <!-- demo start -->
    <div class="test">
        <div class="flex_3" style="-webkit-box-flex-group: 6;">
            flex-3..testtestest<br />-webkit-box-flex-group: 6;
        </div>
        <div class="flex_2" style="-webkit-box-flex-group: 5;">
            flex-2<br />-webkit-box-flex-group: 5;
        </div>
        <div class="flex_w200">testtestest</div>
    </div>
    <!-- demo end -->


</body>
</html>

 

posted @ 2016-07-07 19:05  窗棂  Views(298)  Comments(0)  Edit  收藏  举报