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. 

    2. <html lang="en">
      3. 

    3. <head>
      4. 

    4.     <meta charset="UTF-8">
      5. 

    5.     <title>Title</title>
      6. 

    6.     <style>
      7. 

    7.         .test_box {
      8. 

    8.             display: -moz-box;       //父元素的声明or许可
      9. 

    9.             display: -webkit-box;
      10. 

    10.             display: box;            //弹性盒子模型的声明
      11. 

    11.             width: 200px;
      12. 

    12.         }
      13. 

    13.         .list_one {
      14. 

    14.             -moz-box-flex: 1;
      15. 

    15.             -webkit-box-flex: 1;
      16. 

    16.             box-flex: 1;
      17. 

    17.             border:1px solid #000;
      18. 

    18.         }
      19. 

    19.         .list_two{
      20. 

    20.             -moz-box-flex: 2;
      21. 

    21.             -webkit-box-flex: 2;
      22. 

    22.             box-flex: 2;
      23. 

    23.             border:1px solid #000;
      24. 

    24.         }
      25. 

    25.     </style>
      26. 

    26. </head>
      27. 

    27. <body>
      28. 

    28. <div>
      29. 

    29.     <div class="test_box">
      30. 

    30.         <div class="list list_two">1</div>
      31. 

    31.         <div class="list list_one">2</div>
      32. 

    32.         <div class="list list_one">3</div>
      33. 

    33.     </div>
      34. 

    34. </div>
      35. 

    35. </body>
      36. 

    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. 

    2.       width:60px;
      3. 

    3.      border:1px solid #000;
      4. 

    4. }
      5. 


      6. 

    6. HTML代码如下：
      7. 

    7. <div>
      8. 

    8.     <div class="test_box">
      9. 

    9.         <div class="list list_one">1</div>
      10. 

    10.         <div class="list list_two">2</div>
      11. 

    11.         <div class="list list_three">3</div>
      12. 

    12.     </div>
      13. 

    13. </div>

结果

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

3、父标签的属性

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










CCS box-flex属性的更多相关文章

  1. 详解 Flexible Box 中的 flex 属性

    导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...

  2. CSS布局学习（二） - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  3. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  4. flex属性

    一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...

  5. CSS3-flex弹性布局之flex属性

    flex属性 前置

  6. flexbox子盒子flex属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css属性之flex属性

    flex属性 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间.是一个简写属性,可以同时设置flex-grow, flex-shrink, flex-basis三个子属性. /* Basic ...

  8. 小程序flex属性两边边距自适应

    使用flex属性两边边距自适应解决方案   Justify-content:center   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...

  9. [20190618]日常学习记录(二)-flex属性及vue实战

    早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...

  10. 伸缩容器-display：flex设置flex属性的理解

    1.flex属性 1.1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto. flex-grow: 定义项目的放大比例,默认为0,即 ...

随机推荐

  1. 尝试用面向对象思维理解Vue组件

    什么是组件 用面向对象的思维去理解Vue组件,可以将所有的事物都抽象为对象,而类或者说是组件,都具有属性和操作. 如抽取人类为组件,其基本的属性有姓名.年龄.国籍:基本的方法有吃饭.睡觉.跑步等. & ...

  2. Mysql 主键的操作

    ​ 主键:primary key ,主要的键.一张表只能有一个字段可以使用对应的键,用来唯一的约束字段里面的数据,数据不能重复,这种键称之为主键,一张表只能最多有一个主键.  一.增加主键 方法一:在 ...

  3. bugku--cookie欺骗

    打开题目一看,是一串的东西,再看了一下filename发现不对劲了,明显是base64编码,拿去解码一下, 发现是这个,说明是filename,是需要解析的哪个文件名,把index.php编码一下,试 ...

  4. Redhat 6.9 升级SSH到OpenSSH_8.6p1完整文档

    这个文章是转载,原文连接在这个:https://www.cnblogs.com/xshrim/p/6472679.html 这个问题遇到过,下面可以解决 ----------------------- ...

  5. VLAN间路由

    三种方式 通过路由器 通过单臂路由(子接口) 通过三层设备三层交换机

  6. 灵魂画手的零基础python教程1：关于Python学习的误区、python的优缺点、前景

    滴~ 近段时间,因为工作项目的原因,阿菌要重拾起python这门语言了,所以顺势写一门python教程,精心的编排,配上漫画和视频,希望能帮助更多想接触编程的同学入门,课程将从基础语法开始讲起,和大家 ...

  7. P5816 [CQOI2010]内部白点 题解

    [题目链接] [解析] 好题. 拿到题目首先先看一下它的无解情况是怎么判断的. 然后很明显这个是不存在无解情况的. 因为它的黑点开始都是给定了的,可以理解为一个边界. 而新的变化的黑点不会往外扩张,那 ...

  8. 痞子衡嵌入式：串行NOR Flash的页编程模式对于量产时间的影响

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是串行NOR Flash的页编程模式对于量产时间的影响. 任何嵌入式产品最终都绕不开量产效率话题,尤其是对于主控是非内置 Flash 型 ...

  9. mysql 远程登录 10038提示，无法连接

    mysql 默认使用端口3306 MYSQL服务器:WIN7 控制面板,WINDOWS防火墙--高级设置--入站规则--新建规则--端口--TCP-特定本地端口--3306--允许连接--下一步,至完 ...

  10. ES6新增语法(五)——Promise详解

    Promise介绍 promise是一个对象,从它可以获取异步操作的消息.有all.race.reject.resolve这几个方法,原型上有then.catch等方法. Promise的两个特点: ...