flex: 1 0 50%;

在CSS布局中，`flex: 1 0 50%;` 是 `flex-grow`, `flex-shrink`, 和 `flex-basis` 属性值的组合，用于创建弹性盒子（Flexbox）布局。这里解释一下每个部分：

1. `flex-grow`: 它表示元素在可用空间增加时如何自动伸缩。值为1意味着元素会占据剩下的空间除以所有 flex 容器内元素 `flex-grow` 的总和后的比例。如果其他元素设置为0，这个元素将占去一半。

2. `flex-shrink`: 控制元素在空间不足时缩小的比例。默认值通常为1，即默认可以等比例地缩小。若设为0，则该元素不会缩小。

3. `flex-basis`: 初始大小或主轴的基础尺寸，也就是元素未压缩时占据的空间。这里的 "50%" 表示元素的初始宽度将是其容器宽度的50%。

简而言之，这个规则告诉浏览器：当容器有足够的空间时，这个元素会扩张到占满剩余的一半；如果没有足够的空间，它既不会收缩也不会超过50%的基础宽度。

相关问题

flex: 0 50%

flex: 0 50%是一个用于设置flex项的flex-grow、flex-shrink和flex-basis属性的缩写。其中，flex-grow为0，表示不允许flex项在水平方向上放大；flex-shrink为1，表示允许flex项在空间不足时缩小；flex-basis为50%，表示flex项的初始尺寸为父容器的50%宽度。这意味着，如果有一个父容器宽度为500px，那么flex项的初始宽度为250px。如果父容器的宽度发生变化，flex项的宽度会自动调整以适应剩余空间。如果父容器的宽度变为600px，那么flex项的宽度会变为300px；如果父容器的宽度变为400px，那么flex项的宽度会保持不变，仍然为250px，超出的部分会溢出父容器。

flex:1 1 auto

`flex:1 1 auto`是CSS3中的flex布局中的一种常用属性，用于设置弹性盒子的伸缩性。

属性值解释：
- `flex-grow: 1`表示弹性盒子在父容器内分配剩余空间时，可以放大（即伸展）的比例为1，如果多个子元素都写了这个属性，那么它们的放大比例相同，即平分剩余空间。
- `flex-shrink: 1`表示弹性盒子在父容器内空间不足时，可以缩小的比例为1，如果多个子元素都写了这个属性，那么它们的缩小比例相同，即平摊空间不足的情况。
- `flex-basis: auto`表示弹性盒子在未伸缩时的大小，auto表示由子元素自身大小决定。

具体用法可见以下实例：

<style>
.parent {
  display: flex;
  /* flex: 1 1 auto; */
}

.child {
  width: 100px;
  height: 50px;
  background-color: blue;
  margin: 10px;
  /* flex: 1 1 auto; */
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>