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的更多相关文章

  1. CSS 弹性盒子 flex的三个属性:grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  2. JS 与Flex交互:html中的js 与flex中的actionScript通信

    Flex与JavaScript交互的问题,这里和大家分享一下,主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容. Flex 与JavaScript ...

  3. 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 ...

  4. flex——将Sprite控件添加到FLEX UI中

    在Flex的帮助文档里,有很多例子都是扩展Sprite类的.如果想把这些实例添加到你的s:Application中,如:addChild(DisplayObject ),肯定会出错.错误的大致意思是: ...

  5. Java与Flex学习笔记(20)---将flex页面嵌入到jsp页面中

    如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中.要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可.你可以在次下载:FlexModul ...

  6. Flex学习之(JS中调用Flex的方法)

    flex端 public function initApp():void   {    ExternalInterface.addCallback("function1",call ...

  7. flex (html弹性布局)

    flex是什么? 任何容器都可以指定为flex布局: .box{ display: flex;  /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex ...

  8. 微信小程序flex布局

    一.flex布局基础 二.相对定位和绝对定位   flex的容器和元素   主轴(左-右),交叉轴(上-下)     flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...

  9. 前端flex布局学习笔记

    flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...

  10. 微信小程序学习笔记(7)--------布局基础

    ui布局基础 一.flex布局 1.flex的容器和元素 2.flex容器属性详解     1>flex-direction不仅设置元素的排列方向,还设置主轴和交叉轴如下图主轴是由上到下 2&g ...

随机推荐

  1. Excel技巧--提取中文字串

    类似的,如果要提取上图第1列的商品,不要型号,如第2列. 可以考虑使用SEARCHB函数. searchb与search的区别,在于searchb函数以字节为单位搜索,search函数以字符为单位搜索 ...

  2. 一种C语言实现面向对象特性的继承,多态

    基类: //.h typedef int (*TELE_SEND_CB)(char *pdata, int len); //函数表结构 typedef struct tele_pro_base_vtb ...

  3. Plickers——教师拿手机、学生拿卡片,就可以完成即时全员互动!

    全员互动.立刻反馈.无设备添加.无能耗增加,风靡全球教育界,杭州师范大学硕士生导师杨俊锋教授推荐!老师拿手机,学生拿卡片就可以完成!      操作方法:      1.注册:登录www.plicke ...

  4. Solr使用访问地址控制索引的,删除、创建

    启动Solr,删除全部索引数据: http://localhost:8080/solr/update/?stream.body=<delete><query>*:*</q ...

  5. 20175236 2018-2019-2 《Java程序设计》第六周学习总结

    教材学习内容总结 第七章 try :用于监听.将要被监听的代码(可能抛出异常的代码)放在try语句块之内,当try语句块内发生异常时,异常就被抛出. catch:用于捕获异常.catch用来捕获try ...

  6. Java中的transient关键字

    转载于:[lfsf802](http://blog.csdn.net/lfsf802/article/details/43239663) 关键字介绍 一个对象只要实现了Serilizable接口,这个 ...

  7. [python,2018-06-25] 高德纳箭号表示法

    概念 高德纳箭号表示法是种用来表示很大的整数的方法,由高德纳于1976年设计.它的意念来自幂是重复的乘法,乘法是重复的加法. 定义 计算 一个箭头 2↑3=2×2×2=8 2↑4=2×2×2×2=16 ...

  8. java生成简单验证码图片

    概要 最近项目需要用java实现输出随机验证码图片到前台,正好有机会接触下java的绘图类,完成需求后也有时间做个总结,写篇随笔记录下也希望能帮助到有同样需求的人! 需求流程图 1.生成随机数 在ja ...

  9. 使用Pycharm创建Django项目

    一.安装django pip install django 二.创建空django项目 选择New Project...打开创建项目向导. 成功创建一个空Django项目. 创建好的项目可以看到,已经 ...

  10. bootstrap的使用集锦

    在使用div样式的时候可以根据页面布局来调整大小 <div class="col-md-8 col-md-offset-3"># col-md-8 div所占的空间大小 ...