阅读 1363

有 width 不就够了吗,为什么还要 flex-basis 呢?

Flex 布局中,我们知道 flex-basis 属性是用来设置 Flex 项目的初始主轴尺寸(initial main size)的。

一样的效果

但通过实践发现,在 Flex 项目上使用 flex-basiswidth 属性时,得到的效果是一样的。

以下面的结构为例:

<div style="display: flex;">
	<div class="item">Item 1</div>
	<div class="item">Item 2 的内容有点多</div>
	<div class="item">Item 3</div>
</div>
复制代码
  1. 等宽列:在 .item 设置 flex-basis: 0 或者 width: 0 都能得到这个效果。
.item {  flex-basis:0; /* 与设置 width: 0 的效果一样 */ flex-grow: 1;}
复制代码

image.png

  1. 两边固定宽,中间占据剩余空间。
.item:first-child, .item:last-child { flex-basis: 100px; /* 与设置 width: 100px 的效果一样 */ }
.item:nth-child(2) { flex-grow: 1;}
复制代码

image.png

通过观察能够发现:两种布局方式下,不管在 Flex 项目上使用 flex-basis 还是 width,得到的效果都是一样的。

区别何在?

事实也是这样子,问题来了:有 width 不就够了吗?为什么还要多设计一个 flex-basis 属性呢?

其实,还是有区别的:

注意:为了方便描述,假设当前文档是按照从左到右,从上到下的方式排版的,即处在水平书写模式(horizontal writing modes)下。

  • 主轴尺寸:首先要明确的是,flex-basis 设置的是 Flex 项目的主轴尺寸,当 flex-direction 取值 columncolumn-reverse 时,flex-basis 表示的就不是 width,而是 height 了。
  • 支持简写:通过 flex 简写属性,我们可以同时设置 flex-growflex-shrinkflex-basis 这三个属性,如果使用 width,就不得不分开设置了。
  • 使用范围:flex-basis 只会在 Flex 项目上生效,对定位了的 Flex 项目还不起作用。
  • 优先级别:当在 Flex 项目上同时设置 flex-basis 和 width/height 时,生效的会是 flex-basis

auto 和 content

flex-basis 的默认值是 auto,与另一个可取值 content 的差别微乎其微。

当 flex-basis: auto 时,会查看当前 Flex 项目是否设置 width/height 属性。没有设置的话,就会回退到 flex-basis: content

flex-basis: content 的意思是 automatic sizing,意思 Flex 项目的尺寸根据当前可用空间发生变化的,不超过 max-width/height,不小于 min-width/height

即 flex-basis: content 的效果等于 flex-basis: auto; width/height: auto;,在我看来,这个值没有似乎任何实际意义,有点挺鸡肋。

总结一下

  • 在水平书写模式下,flex-basis 解析效果与 width 完全相同(前提是 flex-basis 的值不等于 autocontent)。
  • flex-basis 只对(非绝对定位的)Flex 项目 生效
  • flex-basis 设置的是 主轴尺寸,根据 flex-direction 的取值不同,可能表示 width,也可能表示 height
  • flex-basis 支持简写属性 flex
  • flex-basiswidth/height 同时使用时,优先级更高

参考链接

(正文完)


广告时间(长期有效)

我有一位好朋友开了一间猫舍,在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话,不妨扫一扫她的【闲鱼】二维码。不买也不要紧,看看也行。

(完)

关注下面的标签,发现更多相似文章
评论