CSS 属性 flex: 0 1 auto

简介：

flex 属性是指定了一个弹性盒布局（Flexbox layout）容器的子项如何分配空间的。flex 属性可以通过一个简写形式的属性来设置，该属性随后被分解成三个单独的属性：flex-grow、flex-shrink 和 flex-basis。

其中，flex: 0 1 auto 等价于 flex-grow: 0; flex-shrink: 1; flex-basis: auto;。意味着该项不会在空间不足时缩小，但是会在空间过剩时扩展，并且初始宽度由其本身大小决定。

注意：该值可以替换为任何单独的 flex 属性，例如 flex: 1、 flex: 0 或 flex: 0 0 30px 等。

语法：

flex: initial|flex-grow flex-shrink flex-basis|none;

• initial: 设置属性为它的默认值。即 flex: 0 1 auto 。
• flex-grow: 定义元素的扩展比例，默认为 0。
• flex-shrink: 定义元素的收缩比例，默认为 1。
• flex-basis: 定义元素的初始宽度，默认为 auto。
• none: 与 flex: 0 0 auto 相等。

例子：

将一个容器内的项目按比例分配剩余空间，并且不允许缩小：

.container {
  display: flex;
}

.item {
  flex: 1 0 auto;
}

在上面的例子中，flex: 1 0 auto 将每个项目的扩展比例设置为 1，收缩比例设置为 0，并且初始宽度设置为 auto。这表明项目会尽可能地扩展来填补容器内的空间，但不允许它们缩小以适应更少的空间。

参考资料：

• MDN Web 文档：flex
• CSS-Tricks：A Complete Guide to Flexbox