CCS box-flex属性

box-flex==按比例分配父标签的宽度or高度空间

1、非固定分配

eg.一块地总150平方分配给三孩子，按照2:1:1分
#老大 { 房子-分配: 2; } = 75平
#老二 { 房子-分配: 1; } = 37.5平
#老三 { 房子-分配: 1; } = 37.5平
如果转换成CSS表示就是：
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }
>box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配。

>父元素也是需要添加必要的声明的。看代码

>display:box;的声明其实就是弹性盒子模型的声明，此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。

>Flexbox以95.89％的比率在全球浏览器得到了很好的支持。如果你不考虑IE 10及以下的版本。需要附带私有前缀。就是诸如-moz-, -webkit-之类。

CSS实例

现在把上面的例子CSS实例化，看看在web页面上是个如何的表现：

主要CSS代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test_box {
            display: -moz-box;       //父元素的声明or许可
            display: -webkit-box;
            display: box;            //弹性盒子模型的声明
            width: 200px;
        }
        .list_one {
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
            border:1px solid #000;
        }
        .list_two{
            -moz-box-flex: 2;
            -webkit-box-flex: 2;
            box-flex: 2;
            border:1px solid #000;
        }
    </style>
</head>
<body>
<div>
    <div class="test_box">
        <div class="list list_two">1</div>
        <div class="list list_one">2</div>
        <div class="list list_one">3</div>
    </div>
</div>
</body>
</html>

结果如下：

2、部分定值，剩余再分配

固定一部分50平，剩下的再按照1:2
#老大 { 房子-分配: 2; }
#老二 { 房子-分配: 1; }
#老三 { 房子-分配: 50; }
如果转换成CSS表示就是：
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }
新增CSS样式，完整代码如下

.list_three{
      width:60px;
     border:1px solid #000;
}


HTML代码如下：
<div>
    <div class="test_box">
        <div class="list list_one">1</div>
        <div class="list list_two">2</div>
        <div class="list list_three">3</div>
    </div>
</div>

结果

在块2的样式里面加边距，结果就是

3、父标签的属性

box-orient, box-direction, box-align, box-pack, box-lines.

来自为知笔记(Wiz)

巴特西

CCS box-flex属性

1、非固定分配

2、部分定值，剩余再分配

3、父标签的属性

最新文章

热门文章