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代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         .test_box {
    8.             display: -moz-box;       //父元素的声明or许可
    9.             display: -webkit-box;
    10.             display: box;            //弹性盒子模型的声明
    11.             width: 200px;
    12.         }
    13.         .list_one {
    14.             -moz-box-flex: 1;
    15.             -webkit-box-flex: 1;
    16.             box-flex: 1;
    17.             border:1px solid #000;
    18.         }
    19.         .list_two{
    20.             -moz-box-flex: 2;
    21.             -webkit-box-flex: 2;
    22.             box-flex: 2;
    23.             border:1px solid #000;
    24.         }
    25.     </style>
    26. </head>
    27. <body>
    28. <div>
    29.     <div class="test_box">
    30.         <div class="list list_two">1</div>
    31.         <div class="list list_one">2</div>
    32.         <div class="list list_one">3</div>
    33.     </div>
    34. </div>
    35. </body>
    36. </html>

结果如下：

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

固定一部分50平，剩下的再按照1:2

#老大 { 房子-分配: 2; }
#老二 { 房子-分配: 1; }
#老三 { 房子-分配: 50; }

如果转换成CSS表示就是：

#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }

新增CSS样式，完整代码如下

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

    6. HTML代码如下：

    8. <div>
    9.     <div class="test_box">
    10.         <div class="list list_one">1</div>
    11.         <div class="list list_two">2</div>
    12.         <div class="list list_three">3</div>
    13.     </div>
    14. </div>

结果

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



3、父标签的属性

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























posted @ 2016-06-01 09:13  qing_keep  阅读(697)  评论(0)  编辑  收藏  举报