Flex Basis在CSS中的概念及应用详解

发布时间：2023-10-17 09:44:34 所属栏目：语言来源：

导读：这篇文章给大家分享的是“CSS中flex-basis的概念怎么理解，如何使用”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

概念

1、flex-basis指

这篇文章给大家分享的是“CSS中flex-basis的概念怎么理解，如何使用”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

概念

1、flex-basis指定了flex元素在主轴方向上的初始尺寸。

2、如果不使用box-sizing来改变盒子模型，则该属性决定了flex元素内容盒的宽度或高度的大小。

语法

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

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
实例

在列模式下，flex-basis变成了高度，因为容器高度为 100px，这里把子元素高度设置成了 30px 总计 90px 来效果：

.flex {
flex-direction: column;
}

.flex > * {
flex-basis: 30px;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!