flex-grow、flex-shrink 和 flex-basis代码实例

好的，关于 flex-grow、flex-shrink 和 flex-basis，它们是用来控制 flex 布局中的项目如何在容器中分配空间的属性。我们可以通过设置它们的值来决定项目在容器中的大小、位置以及弹性能力等。以下是一个综合运用这三个属性的例子：

.container {
display: flex;
align-items: center;
}

.item {
flex: 1 0 20%;
}

在这个例子中，flex-grow 的值为 1，表示这个项目具有放大能力；flex-shrink 的值为 0，表示这个项目不具有缩小能力；flex-basis 的值为 20%，表示这个项目的基准大小为容器的 20%。当容器的宽度发生变化时，这个项目的大小会保持在容器宽度的 20% 范围内，而当容器宽度超过这个范围时，这个项目会被放大，直到填满剩余空间。