【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. UiAutomatorHelper 调试类

    package rom; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...

  2. 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) / ...

  3. FasDfs缩略图解决方案 -- Linux

    前面研究了fastdfs的安装部署,并且做了多机同步. 这次我们解决下FastDFS做文件服务器并处理缩略图的问题. 有两个方案,方案1,在上传过程中生成多张图片,服务器存备.方案2,只上传一张图片, ...

  4. ROS进阶学习手记 7 -- RViz仿真实例1

    [任务2]:     用simulator: RViz 工具,完成对小车的建模,名字drive RViz = dvrv, 用 dvrv_node 发布topic和数据格式,向它发送位置指令,使它能接受 ...

  5. 用网线直连的两台PC上的虚拟机通过网线通信的配置

    Configure the ROS Networks: Quick Reference: http://blog.csdn.net/sonictl/article/details/46986565#t ...

  6. UVA-10020-贪心

    题意:给你一些数轴上的线段,要求寻找出某些线段能够完全覆盖[0,M],并且取的线段数目最小. 解题思路: 贪心思路, 1.每个线段都有一个L和R,代表它的起点和终点,对于所有R <= 0 ,   ...

  7. mybatis一（常用配置信息和获取插入后id）

    <!--配置文件--><?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE conf ...

  8. windows清除访问共享文件夹的登陆信息

    https://jingyan.baidu.com/article/c843ea0b70797e77931e4a96.html 当在命令提示窗口输入net use命令时,会显示本机缓存的共享登录信息, ...

  9. Centos代理上网设置

    原文链接:http://m.blog.csdn.net/article/details?id=51851677 一.centos自带界面设置代理 1. 界面设置  squid默认代理端口3128. 2 ...

  10. CRC16-CCITT C语言代码

    代码如下,使用空间换时间的方法 #define CRC16_CCITT_SEED 0xFFFF // 该位称为预置值,使用人工算法(长除法)时 需要将除数多项式先与该与职位 异或 ,才能得到最后的除数 ...