Skip to main content

flex-basis 属性

Docs

flex-basis - CSS：层叠样式表 | MDN (mozilla.org)

  • flex-basis 用来设置 flex items 在 main axis 方向上的 base size
    • auto（默认值）、具体的宽度数值（100px）
  • 决定 flex items 最终 base size 的因素，从优先级高到低
    • max-width\max-height\min-width\min-height
    • flex-basis
    • width\height
    • 内容本身的 size

flex-basis 属性用于设置弹性项在主轴方向上的初始尺寸。它定义了一个弹性项的初始大小，以便在剩余空间分配之前进行分配。

默认值为 auto，即元素的本来的大小。flex-basis 可以取一个长度值或一个百分比，也可以设置为 content、fit-content 或 auto 等关键字。

下面是一些常用的取值：

  • 长度值：如 flex-basis: 100px;，表示初始尺寸为 100 像素。
  • 百分比：如 flex-basis: 50%;，表示初始尺寸为父元素宽度的一半。
  • content：表示元素的大小应该与其内容一样（如果弹性项没有内容，则尺寸为 0）。
  • fit-content：表示元素应该根据其内容调整大小，但是不要超过其 max-content 大小。
  • auto：表示默认值，即元素的本来的大小。

在布局时，弹性项的 flex-basis 属性会在弹性容器的可用空间中占据一定的空间，然后根据弹性项的 flex-grow 和 flex-shrink 属性来分配剩余空间。如果弹性项的 flex-basis 属性为 0，则 flex-grow 和 flex-shrink 属性将决定其在弹性容器中的尺寸。

.container {
  display: flex;
}

.item {
  flex-basis: 100px;
}

在上述代码中，所有弹性项的 flex-basis 属性为 100 像素，它们将占据主轴方向上的 100 像素的空间。

需要注意的是，flex-basis 属性不是用来设置最小或最大宽度的，而是用来设置初始尺寸的。如果想要设置最小或最大宽度，应该使用 min-width 或 max-width 属性。

Details
Details