首页>前端教程>CSS教程

flex-basis和width到底谁听谁的?

以前看规范的时候,感觉这属性讲的太绕,没有去深究,不过不知其所以然的问题终究有一天还是要面对,毕竟明白自己无知就是学习的最大动力了。

百度了一下,看到了一篇靠谱的文章,但是还不够全面,到底谁是原创不太好判定,我就以发布时间最早的为原创帖链接了。

[翻译]Flex Basis与Width的区别

不过,里面推荐的Flexbox Zombies游戏不错,比flexboxfroggy.com界面酷炫多了。

所以,还是老老实实自己动手研究一遍吧。

一、flex-basis的值

Value : content | <'width'>    

Initial : auto    

规范里面是这样定义的。

flex-basis的目的是设置flex item的初始的尺寸,默认是content box的尺寸,如果设置了box-sizing,则以box-sizing的为主。比如设置了box-sizing:border-box,则flex-basis的默认值就是盒子的border box的尺寸。(The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.)

所以,flex-basis的auto这个初始值,默认就是没有设置box-sizing的盒模型下的cotent box的大小。也就是以内容为基准的。

再看value值,content不被谷歌浏览器支持,火狐倒是支持,可惜没啥用。所以这个属性值可以不管了。

<'width'>  这个属性值就和平时使用width属性可以使用的值一样的格式,支持length(带单位的长度,比如40px,3em等)或percentage(百分比)。

二、和width共用的时候的优先级

这里以宽度为例子,高度的原理是一样的。

既然flex-basis可以设置flex item的宽度尺寸,width属性也可以,那到底同时设置的时候,谁听谁的呢?

所以就需要通过程序去验证。

1、当没有设置flex-basis的时候

设置width有用,当flex container的空间足够的时候,使用width的值,当空间不足够的时候,默认flex-shrink收缩起作用,不会溢出容器,此时flex item的宽度就不是width的值了。

2、设置flex-basis为auto的时候

这auto不就是默认值吗,设置与不设置,和第一种情况一样。

说明flex-basis : auto < width

3、设置flex-basis的值为非auto的时候

比如设置了width:200px,flex-basis:150px,则flex-basis的值优先。(in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.)

同样,当flex-basis的值足够大的时候,导致flex container装不下的时候,flex-shrink的收缩能力又让flex item收缩到合适的大小不溢出容器。

所以width < flex-basis为非auto的时候

4、设置了min/max-width的时候

当设置了min/max-width的时候,优先使用min/max-width的值。

所以可以得到这样一个结论:auto是默认值,由内容撑开。width是没有设置flex-basis时的替代选项,min/max-width是flex-basis的下限和上限,并且可以破坏flex-shrink和flex-grow的弹性。

5、当使用flex的时候

为flex设置number的时候,默认是flex:number 1 0,这个时候flex-basis为0%,所以设置width的值依然不起作用。

当flex:none的时候,等价于flex : 0 0 auto,这时width是有作用的。

当flex:auto的时候,等价于flex : 1 1 auto, 这时虽然flex-basis为auto,但是width不起作用。

所以官方文档鼓励作者使用flex速记而不是直接使用flex-basis来控制灵活性,因为该flex速记会正确地重置任何未指定的属性值以适应常见的用途。

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-basis directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

好了,虽然没有直接的案例展示,但是逻辑讲清楚了,这篇文章适合已经了解了flexbox的人,如果是一无所知的小白,估计一头雾水,现在写文章变懒了,不再那么详细的贴代码了,估计更多的是方便自己的回顾吧。

当然,使用游戏练习flexbox也是好方法,除了https://flexboxfroggy.com/之外,这款游戏更棒https://mastery.games/flexboxzombies/,贴个图,如果不能玩,请翻墙。

Image 3.jpg

点赞


2
保存到:

相关文章

Top