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. 【原创】Ingress-Nginx-Controller的Metrics监控源码改造简析

    一.背景 目前我们的生产环境一层Nginx已经容器化部署,但是监控并不完善,我们期望其具有Ingress-Nginx-Controller组件上报监控的数据.这样可以建立请求全链路的监控大盘.有利于监 ...

  2. 3、SpringBoot整合之SpringBoot整合JDBC

    SpringBoot整合JDBC 一.创建SpringBoot项目 选择Spring Web.JDBC API.MySQL Driver 二.在pom配置文件中修改JDBC版本,导入lombok &l ...

  3. Go 中的 channel 与 Java BlockingQueue 的本质区别

    前言 最近在实现两个需求,由于两者之间并没有依赖关系,所以想利用队列进行解耦:但在 Go 的标准库中并没有现成可用并且并发安全的数据结构:但 Go 提供了一个更加优雅的解决方案,那就是 channel ...

  4. intelliJ idea 自动修复eslint语法问题

    在要修复代码的文件上或全选需要修复的代码,快捷键:ctrl+shift+a,调出Find Action面板.搜索fix eslint problems,点击此操作,自动修复完成.

  5. 【网络编程】HTTP简介&URL

    目录 前言 1. http 简介 1.1 概念 1.2 原理 1.3 特点 2. URL 简介 2.1 概念 2.2 URL 通用格式 2.3 网页地址 实例说明 3. HTTP 消息结构 3.1 客 ...

  6. CRM软件从哪些方面帮助企业更上一层楼

    CRM顾客智能管理系统可以将"以顾客为管理中心"的管理模式与高新科技方式紧密结合,协助公司搭建优良的客户关系管理,改进顾客的消費感受,进而提升顾客的满意率,为公司产生大量的盈利.据 ...

  7. Linux文件编辑工具——VIM

    Linux文件编辑工具--VIM 1.VIM基本概述 1.1 什么是vim vi 和 vim 是 Linux 下的一个文本编辑工具.(可以理解为 windows 的记事本,或 Notepad++ 1. ...

  8. DIY一个智能开关kwswitch

    源码地址:https://gitee.com/kerwincui/kwswitch 平台简介 该智能开关平台包括服务端.硬件端.PC端和安卓端.硬件使用ESP8266模块,成本相对较低,可以发挥想象力 ...

  9. 刷算法，这些api不可不知！

    大家好,我是老三,最近在刷算法,发现有些api记得不熟,所以整理了一波,如果你也在刷题,赶紧收藏吧! 集合 在刷题中,各种数据结构是我们常常用到的,例如栈实现迭代.哈希存储键值对等等,我们来看看常用集 ...

  10. 传统.NET 4.x应用容器化体验（1）

    我们都知道.NET Core应用可以跑在Docker上,那.NET Framework 4.x应用呢?借助阿里云ECS主机(Windows Server 2019 with Container版本), ...