码迷,mamicode.com
首页 > 其他好文 > 详细

Flex Basis与Width的区别

时间:2017-09-11 14:20:54      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:www   内容   lan   important   shrink   ems   项目   div   width   

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的区别

标签:www   内容   lan   important   shrink   ems   项目   div   width   

原文地址:http://www.cnblogs.com/tekkaman/p/7504636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!