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. js笔记15

    DOM2动态创建节点 1.生成节点的方法 document.createElement("div") 2.插入节点的方法 父元素.appendChild(新节点) 在父节点的子节点 ...

  2. external-provisioner源码分析（2）-main方法与Leader选举分析

    更多ceph-csi其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 external-provisioner源码分析(2)-main方法与Leader选举分析 本 ...

  3. 【转载】CentOS-yum安装Docker环境

    安装Docker环境 $ yum install docker -y 启动Docker $ systemctl start docker 设置自启动 $ systemctl enable docker ...

  4. WebService：CXF的JaxWsDynamicClientFactory实现调用WebService接口

    首先需要引入依赖jar包 #版本只供参考,具体看项目 <dependency> <grouId>org.apache.cxf</grouId> <artifa ...

  5. R 语言学习过程全记录 ~

    RStudio介绍超详细的教程:https://www.jianshu.com/p/132919ca2ca9 前辈的心得:https://blog.csdn.net/kMD8d5R/article/d ...

  6. 『心善渊』Selenium3.0基础 — 27、unittest跳过测试的使用

    目录 1.什么是跳过测试 2.常用的跳过测试方法和装饰器 3.跳过测试示例 4.TestCase.skipTest()方法 1.什么是跳过测试 当测试用例写完后,有些模块有改动时候,会影响到部分用例的 ...

  7. Http2.0详解

    前言 HTTP/1.1协议为现在网络提供了20年的支持.从那时起,网站已经从静态的.文本驱动的文档发展为交互式的.富媒体的应用程序.在此期间底层协议保持不变这一事实正好说明了它的通用性和能力.但随着网 ...

  8. Socket 编程介绍

    Socket 编程发展 Linux Socket 编程领域,为了处理大量连接请求场景,需要使用非阻塞 I/O 和复用.select.poll 和 epoll 是 Linux API 提供的 I/O 复 ...

  9. ARTS第十三周（阅读Tomcat源码）

    1.Algorithm:每周至少做一个 leetcode 的算法题2.Review:阅读并点评至少一篇英文技术文章3.Tip:学习至少一个技术技巧4.Share:分享一篇有观点和思考的技术文章 考研真 ...

  10. css 层叠上下文和层叠顺序

    层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中 哪些元素拥有层叠上下文 1.根元素,也就是html默认拥有 ...