css弹性盒子中父元素空间分配之flex-grow、flex-shrink、flex-basis

最新推荐文章于 2024-09-22 21:53:55 发布

一只气鼓鼓的小河豚

最新推荐文章于 2024-09-22 21:53:55 发布

阅读量518

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/liting_1992/article/details/122347487

版权

本文详细介绍了CSS弹性盒子模型中的flex-grow、flex-shrink和flex-basis属性。flex-basis定义了元素在主轴方向上的初始大小，其优先级高于width。flex-grow用于设置弹性盒子的扩展比率，决定子元素如何分配父元素的剩余空间。flex-shrink则规定了元素的收缩规则，用于在空间不足时子元素如何缩小自身以适应父容器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex-basis——元素在主轴方向上的初始大小

该属性用来设置元素的宽度，优先级高于width

语法

/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 在flex item内容上的自动尺寸 */
flex-basis: content;

/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;