flex

语法:flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

取值:

  • none:none关键字的计算值为: 0 0 auto

  • [ flex-grow ]:定义弹性盒子元素的扩展比率。

  • [ flex-shrink ]:定义弹性盒子元素的收缩比率。

  • [ flex-basis ]:定义弹性盒子元素的默认基准值。

复合属性说明

复合属性:设置或检索弹性盒模型对象的子元素如何分配空间

如果缩写flex:1, 则其计算值为:1 1 0

#box{display:-webkit-flex;display:flex;width:800px;margin:0;padding:0;list-style:none;}
#box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
#box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
#box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}
上例中,定义了父容器宽(即主轴宽)为800px,由于子元素设置了伸缩基准值flex-basis,相加300+500+600=1400,那么子元素将会溢出1400-800=600px;
由于同时设置了收缩因子,所以加权综合可得300*1+500*2+600*3=3100px;
于是我们可以计算a,b,c将被移除的溢出量是多少:
a被移除溢出量:300*1/3100*600=3/31,即约等于58px
b被移除溢出量:500*2/3100*600=10/31,即约等于194px
c被移除溢出量:600*3/3100*600=18/31,即约等于348px
最后a,b,c的实际宽度分别为:300-58=242px, 500-194=306px, 600-348=252px

多用在移动端,兼容性在 andriod4.1+ 就目前主流的设备系统绝大都是支持的。

CSS-3 新弹性盒模型属性的更多相关文章

  1. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. CSS3弹性盒模型之box-orient & box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...

  3. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  4. CSS——弹性盒模型

    弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 这东 ...

  5. CSS弹性盒模型flex概念

    盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型

    CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起 ...

  7. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  8. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  9. 【css】弹性盒模型

    弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...

随机推荐

  1. HyperLedger/Fabric JAVA-SDK with 1.1

    HyperLedger/Fabric JAVA-SDK with 1.1 该项目可直接在github上访问. 该项目介绍如何使用fabric-sdk-java框架,基于fabric-sdk-java ...

  2. kubeadm安装K8S单master双节点集群

    宿主机:master:172.16.40.97node1:172.16.40.98node2:172.16.40.99 # 一.k8s初始化环境:(三台宿主机) 关闭防火墙和selinux syste ...

  3. A. Elections

    链接 [http://codeforces.com/contest/1043/problem/A] 题意 有n个投票人已经投个对手ai票,让你求最小的k使得k-ai加起来大于,对手得票总和 分析 一个 ...

  4. 关于github的使用心得

    https://github.com/JavaLizheng/test git常用命令: git config :配置git git add:更新working directory中的文件至stagi ...

  5. vm15安装esxi6.0

    vmware 15安装esxi6.0时发现出现没有硬盘选择,导致无法安装 在vm12上安装正常 经过测试 1.需要在虚拟机硬件兼容性上选择12.x 2.版本也要选6.0,不要选6.X 其次,esxi要 ...

  6. [置顶网]POWER 9为云与智能打造强大引擎

    POWER 9为云与智能打造强大引擎 关键字: 浪潮商用机器 POWER9 至顶网服务器频道 (文/董培欣): 从全球角度看,政治经济波动持续.逆全球化趋势抬头.技术加速变革商业等因素促使企业需要数字 ...

  7. 【菜鸟】RESTful 架构详解

    RESTful 架构详解 分类 编程技术 1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次 ...

  8. [转帖]PG的简单备份恢复 找时间进行测试

    转帖PG的简单使用 https://blog.csdn.net/lk_db/article/details/77971634 一: 纯文件格式的脚本: 示例:1. 只导出postgres数据库的数据, ...

  9. Python的文件读写

    目录 读文件 操作文件 读取内容 面试题的例子 写文件 操作模式 指针操作 字符编码 读文件 操作文件 打开一个文件用open()方法(open()返回一个文件对象,它是可迭代的): 文件使用完毕后必 ...

  10. 用Setup Factory7.0怎样打包delphi的BDE?

    BDE打包发布实例操作步骤如下: 使用软件:Setup Factory 7.0打包 把C:\Program Files\Common Files\Borland Shared中的所有文件和你的开发的应 ...