弹性布局flex属性

弹性布局（Flexbox）是一种用于创建灵活的布局结构的 CSS 属性。其中，flex 属性是用于定义弹性项（flex item）在弹性容器（flex container）中的大小分配和排列方式的关键属性。

flex 属性有三个值，分别是 flex-grow、flex-shrink 和 flex-basis。这三个值可以单独使用，也可以组合在一起使用。

- flex-grow：定义弹性项在剩余空间中所占的比例。默认值为 0，表示不放大。如果所有的弹性项的 flex-grow 都为 1，则它们会平分剩余空间；如果一个弹性项的 flex-grow 为 2，而其他弹性项的 flex-grow 为 1，则前者会占据两倍的剩余空间。
- flex-shrink：定义弹性项在空间不足时缩小的比例。默认值为 1，表示可以缩小。如果所有的弹性项的 flex-shrink 都为 1，而空间不足，则它们会等比例缩小；如果一个弹性项的 flex-shrink 为 2，而其他弹性项的 flex-shrink 为 1，则前者会相对于后者更快地缩小。
- flex-basis：定义弹性项在分配多余空间之前的初始大小。默认值为 auto，表示由弹性项自身内容决定。可以使用具体的长度值或百分比来指定初始大小。

flex 属性的常见用法是通过以下语法来定义弹性项的大小分配：

.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

例如：

.item {
  flex: 1 1 auto;
}

这会将该弹性项的 flex-grow、flex-shrink 和 flex-basis 属性分别设置为 1、1 和 auto，表示它会平分剩余空间，并根据自身内容来决定初始大小。

注意，flex 属性还有其他的取值和使用方式，此处仅介绍了一种常见的用法。弹性布局还包含其他属性和特性，例如 flex-direction、justify-content、align-items 等，可以用来控制弹性容器和弹性项的排列方式和对齐方式。