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. Linux 中的 AutoHotKey 键映射替代方案

    1. Windows 之 AutoHotKey 初次了解AutoHotKey,是在Win 下最爱效率神器:AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不 ...

  2. 详解C++中继承的基本内容

    有些类与类之间存在特殊的关系,有共性也有特性,比如动物类可以细分为猫,狗等.下级别的成员除了拥有上一级的共性,还有自己的特性,这个时候就可以考虑继承的技术,减少重复代码. 一.继承中的对象模型 1.1 ...

  3. 37、linux下安装python3.6和django

    37.1.安装python: 1.python介绍: python是一种面向对象的,解释型的计算机语言,它的特点是语法简介,优雅,简单易学.1989年诞生,Guido(龟叔)开发. 编译型语言:代码在 ...

  4. 10、基本数据类型(set)

    10.1.集合: 1.集合元素用大括号括起来,用逗号分割每个元素 2.集合的特点: (1)集合元素的数据类型只能是不可变数据类型,"列表"."字典"." ...

  5. 21、部署heartbeat

    21.1.heartbeat部署规划: 本文的实验环境是虚拟机设备: 名称 接口 ip 用途 master-db(主) eth0 10.0.0.16/24 用于服务器之间的心跳连接(直连) eth1 ...

  6. asp.net mvc中的安全性

    1.重复提交攻击:通过Bind特性指定要绑定和不绑定的值. 2.Cookie盗窃:阻止脚本对站点中Cookie的访问,webconfig文件中添加<HttpCookies domain=&quo ...

  7. STP、生成树的算法

    STP.生成树的算法       一.STP        1)STP概述        2)交换网络环路的产生        3)STP简介        4)STP的工作原理        5)S ...

  8. stream之map的用法

    一.Stream管道流map的基础用法 最简单的需求:将集合中的每一个字符串,全部转换成大写! List<String> alpha = Arrays.asList("Monke ...

  9. Python入门学习指南

    对于初学者,入门至关重要,这关系到初学者是从入门到精通还是从入门到放弃.以下是结合Python的学习经验,整理出的一条学习路径,主要有四个阶段 NO.1 新手入门阶段,学习基础知识 总体来讲,找一本靠 ...

  10. 密码学系列之:Merkle–Damgård结构和长度延展攻击

    密码学系列之:Merkle–Damgård结构和长度延展攻击 简介 Merkle–Damgård结构简称为MD结构,主要用在hash算法中抵御碰撞攻击.这个结构是一些优秀的hash算法,比如MD5,S ...