【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. 登录iOS Dev Center

    打开网站iOS Dev Center使用苹果开发者账号登录iOS Dev Center:登录成功后在页面右侧选择“Certificates, Identifiers & Profiles”:在 ...

  2. 使用swagger 生成 Flask RESTful API

    使用swagger 生成 Flask RESTful API http://www.voidcn.com/article/p-rcvzjvpf-e.html swagger官网 https://swa ...

  3. 41.纯 CSS 绘制一支栩栩如生的铅笔

    原文地址: https://segmentfault.com/a/1190000015153865 感想: 不难 HTML code: <div class="pencil" ...

  4. python中的expandtabs、\t

    expandtabs()将tab转换成空格,默认1个tab转成8个空格,\t制表符代表一个tab,我们也可以自定义转换成几个空格 举个例子: 1 a = "hello\tworld" ...

  5. Angular.js入门

    一.引入angular.js  <script type="text/javascript" src="../plugins/angularjs/angular.m ...

  6. 1. orcle 创建可扩展表空间

    1.创建表空间 a). create tablespace tablespacename datafile 'D:\tablespace\tablespacename.dbf' size 200m a ...

  7. python大法好——编码.文件

    1.编码 python3 中使用utf-8作为默认编码. UTF-8对Unicode进行转化,为解决存储和网络传输问题. UTF是为Unicode编码设计的一种在存储和传输节省空间的编码方案. Uni ...

  8. 将tgz文件解压到指定目录

    转:http://blog.csdn.net/zhenwenxian/article/details/4400404 tar在linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用 ...

  9. 01.hadoop集群环境搭建

    hadoop集群搭建的步骤 1.安装jdk2修改ip地址3.关闭防火墙4.修改hostname5.设置ssh自动登陆6.安装hadoop-------------------------------- ...

  10. 图像识别___YUV学习手记

    视觉专家很早以前就知道,人眼对亮度分辨率的敏感度高于对色彩分辨率的敏感度. 这就是早期模拟和数字压缩形式的主要动因.视频信号会分解为亮度和色度,这两个是组成色彩的元素,这类似于图像可以分解为红.绿.蓝 ...