flex-grow,flex-shrink,flex-basis及flex
flex-grow:默认值0;分配剩余空间的扩张比例;
flex-basis:默认值auto;倘若设置了此属性,那么计算剩余空间之前要优先减去此属性,且它的层级比width高,会将width覆盖。
有一点需要注意,如果flex-basis和width其中有一个是auto,那么另外一个非auto的属性优先级会更高。(也就是非auto的会覆盖auto的)。
flex-shrink:默认值1;分配多余的空间压缩比例。
设为0则代表无论如何都不压缩此子盒子。
flex:flex-grow flex-shrink flex-basis;默认计算值为 0 1 auto;
当flex取值为none,则计算值为 0 0 auto;
当flex取值为auto,则计算值为 1 1 auto;
当flex取值为一个非负数字,则该数字为flex-grow的值,计算值为 非负数字 1 0%;
当flex取值为一个长度或百分比,则该值为flex-basis的值,计算值为 1 1 该长度或百分比;
当flex取值为两个非负数字,则分别视为flex-grow flex-shrink的值,计算值为 两个非负数字 0%;
当flex取值为一个非负数字和一个长度或百分比,则分别视为flex-grow flex-basis的值,计算值为 非负数字 1 长度或百分比;
flex-grow,flex-shrink,flex-basis及flex的更多相关文章
- CSS 弹性盒子 flex的三个属性:grow、shrink、basis
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...
- JS 与Flex交互:html中的js 与flex中的actionScript通信
Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...
- AMQP 0-9-1 Model Explained Why does the queue memory grow and shrink when publishing/consuming? AMQP和AMQP Protocol的是整体和部分的关系 RabbitMQ speaks multiple protocols.
AMQP 0-9-1 Model Explained — RabbitMQ http://next.rabbitmq.com/tutorials/amqp-concepts.html AMQP 0-9 ...
- flex——将Sprite控件添加到FLEX UI中
在Flex的帮助文档里,有很多例子都是扩展Sprite类的.如果想把这些实例添加到你的s:Application中,如:addChild(DisplayObject ),肯定会出错.错误的大致意思是: ...
- Java与Flex学习笔记(20)---将flex页面嵌入到jsp页面中
如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...
- Flex学习之(JS中调用Flex的方法)
flex端 public function initApp():void { ExternalInterface.addCallback("function1",call ...
- flex (html弹性布局)
flex是什么? 任何容器都可以指定为flex布局: .box{ display: flex; /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex ...
- 微信小程序flex布局
一.flex布局基础 二.相对定位和绝对定位 flex的容器和元素 主轴(左-右),交叉轴(上-下) flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- 微信小程序学习笔记(7)--------布局基础
ui布局基础 一.flex布局 1.flex的容器和元素 2.flex容器属性详解 1>flex-direction不仅设置元素的排列方向,还设置主轴和交叉轴如下图主轴是由上到下 2&g ...
随机推荐
- Verilog编码规范与时序收敛
Verilog编码规范与时序收敛 没有优先级的时候,尽量用case 时钟选择
- VsCode配置go环境及插件安装
在vscode中安装go插件. 安装git. 在%GOPATH%\src\目录下,建立golang.org文件夹,并再新建x文件夹. 目录为 "%GOPATH\src\golang.org\ ...
- # 20175311 2018-2019-2 《Java程序设计》第2周学习总结
## 教材学习内容总结 第二周我对如何运行java程序已经比较熟悉了,第二周更多的是注重程序内部的原理了. ## 教材学习中的问题和解决过程 - 问题1:看书时看到的一个例子,不是很懂它是怎么得出结果 ...
- Json序列化自定义属性名称
using Newtonsoft.Json; [JsonProperty("userName")] public string UserName { get; set; }
- Hbase的集群安装
hadoop集群的搭建 搭建真正的zookeeper集群 Hbase需要安装在成功部署的Hadoop平台,并且要求Hadoop已经正常启动. 同时,HBase需要集群部署,我们分别把HBase 部署到 ...
- 集成学习(ensemble learning)
集成学习,又称为“多分类器系统”(multi-classifier system).“基于委员会的学习”(committee-based learning)等.基本的想法是结合多个学习器,获得比单一学 ...
- 大数据学习之路(1)Hadoop生态体系结构
Hadoop的核心是HDFS和MapReduce,hadoop2.0还包括YARN. Hadoop1.x的生态系统: Hadoop2.x引入YARN: HDFS(Hadoop分布式文件系统)源自于Go ...
- 多对多manytomany
----------------------多对多manytomany 要点: 多对多必须有mappedBy,让一个端维护关系 多对多会创建一张关系表,维护关系就是维护第三张表. 所以增加关系,则在集 ...
- Monkey相关参数 笔记
Monkey相关参数 笔记 Monkey是Android系统自带的一个命令行工具,可运行在模拟器里或实际设备中. Monkey可以向被测试的应用程序发送伪随机的用户事件流(如按键.触屏.手势等),实 ...
- 小程序构建npm出现没有找到node_modules
以下转自:https://blog.csdn.net/zhangyabo_code/article/details/86162671 npm initnpm install --production ...