【Flex Basis与Width的区别】

Flex Items的应用准则

content –> width –> flex-basis (limted by max|min-width)
也就是说，

  • 如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
  • 如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小



当容器没有足够大的空间来存放所有的items的时候，flex items会按照压缩率(shrink rate)被压缩(shrink)其大小来填充容器,这个压缩率就是flex-shrink来设置的，默认情况下每个item的压缩率都是一样的。

 
我们可以控制flex items的增长来填充可用的空间，这也就是flex-grow属性的作用。默认值为0，意味着item不会增长。如果将每个item设置flex-grow： 1，那么所有 的item都会等比例的增长来填充剩余的空间。

参考：http://www.jianshu.com/p/17b1b445ecd4

Flex Basis与Width的区别的更多相关文章

  1. jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  2. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  3. [转]jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

  4. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

  5. 详解 $().css('width')和$().width()的区别

    在本次项目开发中,经常用jquery获取高度和宽度并且动态加载,有时候用$().css('width')或$().width()这两个方法获取宽度并设置,但是有时候出现获取不到的情况,查阅资料后发现他 ...

  6. flex item的width VS flex-basis

    flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...

  7. scrollWidth、clientWidth、offsetWidth、width的区别

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  8. [UIScreen mainScreen].bounds.size.width 和self.view.frame.size.width的区别

    self.view.frame.size.width在导航栏titleView计算frame时会出现宽度不准确的情况,布局出现问题,[UIScreen mainScreen].bounds.size. ...

  9. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

随机推荐

  1. 对datetime日期类型进行序列化的处理

    datetime类型序列化 在工作中遇到从数据库中取出来一个datetime类型的数据,在对其进行序列化的过程中,报错python datetime.datetime is not JSON  ser ...

  2. 使用Eclipse编译运行MapReduce程序 Hadoop2.6.0_Ubuntu/CentOS

    使用Eclipse编译运行MapReduce程序 Hadoop2.6.0_Ubuntu/CentOS  2014-10-10 (updated: 2016-05-22) 64246 153 本教程介绍 ...

  3. ubantu 操作

    应用程序启动器“monodevelop.desktop”还没有被标记为可信任的. 于是在网上查询解决方案,在ubuntu中文论坛找到一个帖子提到这个问题的解决方法,尝试之解决. 帖子地址:http:/ ...

  4. rsyncd

    rsync是一个快速.通用的文件复制工具.支持两种工作模式:基于shell的传输.基于服务的传输.1.配置文件 rsyncd.conf文件由模块及其参数构成.模块由方括号包裹模块名称,直到下一个模块结 ...

  5. ThinkPHP 小于5.0.24 远程代码执行高危漏洞 修复方案

    漏洞描述由于ThinkPHP5.0框架对Request类的method处理存在缺陷,导致黑客构造特定的请求,可直接GetWebShell. 漏洞评级严重 影响版本ThinkPHP 5.0系列 < ...

  6. 笔记：js疑难复习

    apply 和 call的区别 call 和 apply 的区别只在于这两个函数接受的参数形式不同 var Person = function(name,age){ this.name = name; ...

  7. <转载>C#与JAVA的区别 http://www.cnblogs.com/Asa-Zhu/archive/2012/11/08/2761114.html

    C#(C-Sharp)是Microsoft的新编程语言,被誉为“C/C++家族中第一种面向组件的语言”.然而,不管它自己宣称的是什么,许多人认为C#更像是Java的一种克隆,或者是Microsoft用 ...

  8. Retrofit添加自定义转换器

    Retrofit2开始支持多种 Converter 并存,在之前,如果你遇到这种情况:一个 API 请求返回的结果需要通过 JSON 反序列化,另一个 API 请求需要通过 proto 反序列化,唯一 ...

  9. python的type class

    在python中,用户定义的class是一个PyTypeObject ( XXX_Type)对象. #PyType_Type是一切类的基类,这是一个全局数据PyTypeObject PyType_Ty ...

  10. du 统计文件夹大小

    du -h --max-depth=1 |grep [TG] |sort   #查找上G和T的目录并排序 du -sh    #统计当前目录的大小,以直观方式展现 du -h --max-depth= ...