【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. BLOB TO CLOB

    CREATE OR REPLACE FUNCTION blob_to_clob (blob_in IN BLOB) RETURN CLOB AS v_clob CLOB; v_varchar VARC ...

  2. Javascript学习笔记5 - 滑动Slides

    开始之前:http://docs.jquery.com/ 是jQuery文档的网站, https://jsfiddle.net/是js的在线验证工具 在html中,有这几个标签: javascript ...

  3. RDD中的cache() persist() checkpoint()

    cache只有一个默认的缓存级别MEMORY_ONLY ,而persist可以根据StorageLevel设置其它的缓存级别. cache以及persist都不是action. 被重复使用的(但是)不 ...

  4. Android xml 绘制图形

    一般用shape定义的xml文件存放在drawable目录下,若项目没有该目录则新建一个,而不要将它放到drawable-hdpi等目录中. 使用shape可以自定义形状,可以定义下面四种类型的形状, ...

  5. js判断用户是客户端还是移动端

    js判断用户是客户端还是移动端 Javascript 判断客户端是否为 PC 还是手持设备,有时候项目中需要用到,很方便的源生检测,方法一共有两种   1.第一种: function IsPC() { ...

  6. leetcode509

    public class Solution { public int Fib(int N) { ) { ; } ) { ; } else { List<int> list = new Li ...

  7. 爬虫--Scrapy-CrawlSpider&基于CrawlSpide的分布式爬虫

    CrawlSpider 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调par ...

  8. HTML页面禁用Enter键自动提交表单

    今天在开发页面时,遇到一个小BUG,,如下图 在页面的文本框获取焦点之后,再按键盘上的Enter键,页面form就会自动提交.如下是页面禁止Enter自动提交代码: document.onkeydow ...

  9. LeetCode题解 Permutations II 和 Permutations I ——回溯算法

    这个算法感觉还是很陌生的.算法导论里没有讲这个算法,而数据结构与算法分析只用了一节来阐述.我居然跳过去了..尴尬. 笨方法解决的: 第一题: 给定一个元素不重复的数组,枚举出他们的全排列. 方法1:递 ...

  10. 翻转单链表 leetcode Reverse Linked List

    翻转一个单链表.这个题目听说很多次了,总感觉肯定不是什么难题. 现在真的有点好高骛远了!总感觉那种很难的算法题才是难题,这种题没必要做.其实眼高手低啊. 这种easy题,我都不能一遍ac,这遇到白板编 ...