Skip to main content

flex 属性

Docs

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

  • flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定 1 个，2 个或 3 个值。

  • flex = none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

    • flex-grow 和 flex-basis 为必须项，flex-shrink 为可选项。

  • 单值语法：值必须为以下其中之一：

    • 一个无单位数 (<number>): 它会被当作 <flex-grow> 的值。
    • 一个有效的宽度 (width) 值：它会被当作 <flex-basis> 的值。
    • 关键字 none，auto 或 initial.

  • 双值语法：第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。

    • 第二个值必须为以下之一：
      • 一个无单位数：它会被当作 <flex-shrink> 的值。
      • 一个有效的宽度值：它会被当作 <flex-basis> 的值。

  • 三值语法:

    • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
    • 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
    • 第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

flex 属性是一个缩写属性，用于设置弹性容器的三个子属性：flex-grow、flex-shrink 和 flex-basis。

flex =
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

其中，flex-grow 和 flex-basis 为必须项，flex-shrink 为可选项。这三个子属性的作用分别如下：

  • flex-grow：用于设置弹性项在可用空间增加时的放大比例。默认值为 0，表示不放大。
  • flex-shrink：用于设置弹性项在可用空间减少时的收缩比例。默认值为 1，表示等比例收缩。
  • flex-basis：用于设置弹性项在主轴方向上的初始尺寸。默认值为 auto，即元素的本来的大小。
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

/* 等价于 */

.item {
  flex: 1 1 0;
}

这两个代码块是等价的，都表示弹性项在空间不足时等比例收缩，而在空间有剩余时，它们将按比例增加宽度以填充剩余空间。

需要注意的是，flex 属性是一个缩写属性，因此如果只指定其中一个子属性，其他子属性将采用默认值。例如，flex: 1 等价于 flex: 1 1 0，表示弹性项在空间有剩余时按比例增加宽度以填充剩余空间，但在空间不足时不收缩。

Details
Details