【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. C#取整函数Math.Round、Math.Ceiling和Math.Floor

    1.Math.Round:四舍六入五取偶 引用内容 Math.Round(0.0) //0Math.Round(0.1) //0Math.Round(0.2) //0Math.Round(0.3) / ...

  2. spring 之 lookup-method & replaced-method II

    显然, lookup-method 的name 对应的方法 是可以有方法参数的, 但是, 我发现, 参数无法传递, 传过去的参数好像被丢入了黑洞一般... 非常奇怪. lookup-method 的n ...

  3. PHP提取HTML代码中img标签下src属性

    需求:提取整片文章中img的src属性,并保存到一个数组当中 preg_match_all("/(href|src)=([\"|']?)([^\"'>]+.(jpg ...

  4. Mac安装Mysql-python _mysql.c:44:10: fatal error: 'my_config.h' file not found

    解决步骤 brew install mysql brew unlink mysql brew install mysql-connector-c sed -i -e /bin/mysql_config ...

  5. ssh-keygen生成git ssh密钥

    title: ssh-keygen生成git ssh密钥 date: 2018-05-07 08:49:21 tags: [git,ssh-keygen] --- ssh-keygen生成git ss ...

  6. HTML 圆心节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PHP 字符串两边填充补零

    str_pad顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任何其它的字符串 例如:str_pad(带填补的字符串,填补后的长度,填补字符串,填补位置) 其中填补后的长度必须是个正整数, ...

  8. day33-常见内置模块二(hashlib、shutil、configparse)

    一.hashlib算法介绍 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 1.什么是摘要算法呢? 摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一 ...

  9. Linux swap 使用

    使用的背景 内存吃紧的时候可以考虑使用swap. swap新增 http://www.cnblogs.com/wuxie1989/p/5888595.html swap 使用 https://www. ...

  10. 我要重新开始学习C++了！

    C++实在是博大精深!之前总不想读厚厚的C++ Primer. 然而,现在的水平真的只是初学者!只是因为写的代码太简单,所以没有用到一些特性.可以说还是门外汉! 写笔记!