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 jq计算器

    <html><head><meta http-equiv="Content-type" content="text/html; charse ...

  2. 从ReentrantLock看AQS (AbstractQueuedSynchronizer) 运行流程

    从ReentrantLock看AQS (AbstractQueuedSynchronizer) 运行流程 概述 本文将以ReentrantLock为例来讲解AbstractQueuedSynchron ...

  3. Apache Hudi在Hopworks机器学习的应用

    Hopsworks特征存储库统一了在线和批处理应用程序的特征访问而屏蔽了双数据库系统的复杂性.我们构建了一个可靠且高性能的服务,以将特征物化到在线特征存储库,不仅仅保证低延迟访问,而且还保证在服务时间 ...

  4. 三代码使用QScrollArea

    QScrollArea是QT封装好的一个滑动界面类 构造函数如下: 指定一个父对象就行,构造函数提供一个滑动的区域,但是这个区域里是没有内容的,构造函数介绍里面让我们看setWidget()这个函数, ...

  5. 第11章：Pod数据持久化

    参考文档:https://kubernetes.io/docs/concepts/storage/volumes/ Kubernetes中的Volume提供了在容器中挂载外部存储的能力 Pod需要设置 ...

  6. 31、DNS介绍

    [root@centos6 ~]# dig @8.8.8.8 www.baidu.com +trace ; <<>> DiG 9.8.2rc1-RedHat-9.8.2-0.3 ...

  7. 3、dns服务搭建

    3.1.dns服务简介: 1.DNS(Domain Name System)域名系统. 目前提供网络服务的应用使用唯一的32位的IP地址来标识,但是由于数字比较复杂.难以记忆,因此产生了域名系统(DN ...

  8. 使用了gitlab管理pipeline，Jenkinsfile 中在出现克隆命令流水线执行会混乱

    Jenkins_pipeline关闭默认检出 问题描述 在使用 Pipeline(流水线)过程中,如果使用了(Pipeline script from SCM)远程 Git 的 Jenkinsfile ...

  9. 超详细的原生JavaScript轮播图（幻灯片）的制作

    本次轮播图的制作主要分为3个部分,分别是:设置定时器自动轮播:点击左右切换按钮轮播:下方点击按钮轮播.具体实现步骤如下: (效果图) html部分代码如下: <div class="s ...

  10. CentOS-Docker搭建Nacos-v1.3.2(单点)

    说明:从v1.3.1版本开始支持自定义mysql-8.x 通用属性配置(v1.3.2) name description option MODE cluster模式/standalone模式 clus ...