【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. 安卓手机H5底部fix定位，呼出键盘底部会上浮解决办法

    <script type="text/javascript">var windowInnerHeight = window.innerHeight; //获取当前浏览器 ...

  2. 傅立叶变换系列（五）快速傅立叶变换（FFT）

    说明: 傅里叶级数.傅里叶变换.离散傅里叶变换.短时傅里叶变换...这些理解和应用都非常难,网上的文章有两个极端:“Esay”  Or  “Boring”!如果单独看一两篇文章就弄懂傅里叶,那说明你真 ...

  3. Ubuntu安装MyEclise16 过程差不多

    选择好安装路径,和workpace路径,可能会因为工作空间放的位置不太对,导致myeclipse出现问题. 1.Ubuntu安装MyEclise10 不知道为什么网上会有那么多安装过程,还有配置目录和 ...

  4. spring揭密学习笔记(1) --spring的由来

    1.spring起源于在EJB暴露出各种严重问题的情况应运而生. Spring是于2003年兴起的一个轻量级的Java开发框架, Spring倡导一切从实际出发,以实用的态度来选择适合当前开发场景的解 ...

  5. 《算法》第四章部分程序 part 4

    ▶ 书中第四章部分程序,加上自己补充的代码,图的深度优先遍历 ● 无向图的深度优先遍历,有向 / 无向图代码仅若干方法名不同,包括递归和非递归版本,去掉了顶点有效性的检查 package packag ...

  6. Python3下获取WINDOWS下所有常用系统路径

    #codeing:utf-8import os #搞定WINDOWS下所有系统路径filename='c:\\WINDOWS_ALL_PATH.txt'f=open(filename,'w')i=1f ...

  7. spring cloud之路（1）

    1.各个功能 springcloud 注册中心 Eureka负载均衡 Ribbon路由网关 Zuul断路器 Hystrix分布式配置 config服务调用跟踪 sleuth日志输出 elk 认证集成 ...

  8. svn下载地址

    SVN svn服务器端下载: https://www.visualsvn.com/server/download/ svn eclipse插件地址(new soft install): http:// ...

  9. React Native，flexbox布局

    Flexbox布局 flex:使组件在可利用的空间内动态地扩张或收缩.flex:1会使组件撑满空间.当有多个组件都指定了flex的值,那么谁的flex值大谁占得空间就大,占得大小的比例就是flex值的 ...

  10. HTTP、TCP、IP协议常见面试题

    前言:在看面试题之前,先了解一下基本定义. HTTP.TCP.IP协议基本定义 HTTP: (HyperText Transport Protocol)是超文本传输协议的缩写,它用于传送WWW方式的数 ...