flex-basis用于设置弹性项目在分配多余空间前的初始主轴尺寸,其值可为auto、长度或百分比,优先于width生效,常通过flex简写属性统一配置,影响项目伸缩行为。

flex-basis 是 CSS Flexbox 布局中的一个关键属性,用于设置弹性项目(flex item)在分配多余空间前的初始主轴尺寸。
flex-basis 的作用
它定义了子元素在伸缩之前希望占据多大空间。浏览器会先按照 flex-basis 设置的值来确定项目的“基础大小”,然后再根据容器剩余空间和其它 flex 属性(如 flex-grow 和 flex-shrink)进行拉伸或压缩。
常见取值包括:- auto:默认值。项目大小基于其内容或 width 属性。
- 长度值:如 200px、5em 等,明确指定基础尺寸。
- 百分比:相对于父容器主轴方向的尺寸,如 50%。
- 0:特别注意,当设为 0 时,空间分配完全由 flex-grow 控制,常用于等分布局。
与 width 的区别
在 flex 容器中,flex-basis 优先于 width 决定项目主轴大小。如果两者同时设置,flex-basis 会覆盖 width 的效果(除非 flex-basis 为 auto)。
实际使用建议
通常不单独使用 flex-basis,而是通过简写属性 flex 来统一设置:
本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看
立即学习“前端免费学习笔记(深入)”;
- flex: 1 相当于 flex: 1 1 0% —— 可伸缩,基础大小趋近 0。
- flex: auto 相当于 flex: 1 1 auto —— 基于内容大小,可伸缩。
- flex: initial 相当于 flex: 0 1 auto —— 不伸展,按内容大小。
基本上就这些。理解 flex-basis 能帮助你更精准地控制弹性布局的空间分配。









