Element-UI__ flex:1

参考：https://www.cnblogs.com/shayloyuki/p/16520330.html

flex:1

当使用flex: 1时，它实际上是flex-grow: 1、flex-shrink: 1 和 flex-basis: 0 的简写形式。这意味着元素将会根据弹性容器的可用空间按比例拉伸，以填充剩余的空间。

在实际应用中，flex: 1经常用于灵活地调整元素在flex布局中的大小。例如，当一个元素设置了flex: 1后，在父容器内的其他元素设置了固定宽度或具体flex值时，该元素将会占据剩余的空间。这种方法非常适用于构建响应式布局，特别是在移动端和PC端之间的适配。

下面是一个简单示例，演示了如何使用flex: 1来调整子元素在flex容器中的大小：

<div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

<style>
.container {
    display: flex;
    height: 200px;
}

.sidebar {
    width: 200px;
    background-color: lightblue;
}

.content {
    flex: 1;
    background-color: lightgreen;
}
</style>

效果

注释flex: 1

在这个示例中，.container是一个flex容器，包含了.sidebar和.content两个子元素。由于.sidebar固定了宽度为200px，而.content使用了flex: 1，所以它会填充所有剩余的空间。