【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. uva-10085-搜索-最远状态的八数码

    直接bfs即可,取最后一个状态 #include <iostream> #include <stdio.h> #include <string> #include ...

  2. JAVA获取文件夹下所有的文件

    package com.test; import org.junit.Test; import org.slf4j.Logger; import org.slf4j.LoggerFactory; im ...

  3. rem布局js实现

    (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...

  4. Swoole 异步mysql使用

    <?php class mysql { private $param; public $db; public function __construct() { $this->db = ne ...

  5. js 简单算法

    1. 嵌套数组打平并且去重 ,,,,,,,,[,,,,[,,]]]; var obj = {};//去重标识 function test(data) { var newArr = []; for ( ...

  6. 机器学习进阶-边缘检测-Canny边缘检测 1.cv2.Canny(进行Canny边缘检测)

    1. cv2.Canny(src, thresh1, thresh2) 进行canny边缘检测 参数说明: src表示输入的图片, thresh1表示最小阈值,thresh2表示最大阈值,用于进一步删 ...

  7. APP-1-相关介绍及资料

    一年前研究了下MUI框架,也做了一些简单的功能,将整个过程整理下.. 1.Hbuilder官网 http://www.dcloud.io/ 2.MUI前端框架 http://www.dcloud.io ...

  8. 保存对象报错with two open Sessions

    purorderService.save(newpur);出现如下 org.springframework.orm.hibernate3.HibernateSystemException: illeg ...

  9. Model操作补充

    参考: http://www.cnblogs.com/wupeiqi/articles/6216618.html

  10. C++中类的多继承

    在写这一主题的文章之前,在网上找到一篇很非常好的文章C++之继承与多态.就没有必要做重复造轮子的事件了,那就从这篇文章开始吧! 在c++中一个类可以从多个基类中派生(即可以有多个父类),这就是多继承. ...