如何理解flex: 1 1 50%

在CSS Flexbox布局中，flex: 1 1 50% 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。以下是详细解释：

分解属性：

flex-grow: 1
- 当容器有剩余空间时，该项目会按比例放大。
- 所有项目的 flex-grow 值总和为分母，当前项目的值作为分子分配空间。
- 例如：两个项目均为 flex-grow:1，则各占剩余空间的 1/2。
flex-shrink: 1
- 当容器空间不足时，该项目会按比例缩小。
- 缩小比例计算方式与 flex-grow 类似（考虑基础尺寸）。
flex-basis: 50%
- 定义项目的初始尺寸（主轴方向）。
- 50% 表示初始宽度为父容器宽度的 50%（水平布局时）。

行为特点：

基础尺寸 ：项目初始占父容器宽度的 50%。
空间充足时 （如父容器宽度为 1000px）：
- 两个项目：各占 500px（总和 100%，无剩余空间，flex-grow 不生效）。
- 单个项目：占 500px，剩余 500px 由 flex-grow:1 分配给它（最终占满容器）。
空间不足时 （如父容器宽 800px，两个项目初始总宽 1000px）：
- 超出 200px 按 flex-shrink:1 等比例收缩（每个项目缩小 100px，最终各占 400px）。

示例场景：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox 布局示例</title>
    <style>
        .outer-box {
            width: 1000px;  /* 父容器宽度 */
            height: 400px;
            border: 1px solid #000000;
            display: flex; /* 父容器，使用 Flexbox 布局 */
        }
        .inner-box {
            flex: 1 1 50%; /* 简写属性 */
        }
        .inner-box1 {
            background-color: red;
        }
        .inner-box2 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer-box">
        <div class="inner-box inner-box1"></div>
        <div class="inner-box inner-box2"></div>
    </div>
</body>
</html>

结果：两个项目各占 500px（初始 50% 正好填满容器，无放大/缩小）。

关键点总结：

属性	值	作用
`flex-grow`	`1`	有剩余空间时，按比例放大
`flex-shrink`	`1`	空间不足时，按比例缩小
`flex-basis`	`50%`	初始尺寸为父容器宽度的 50%

此设定适合需要响应式伸缩的场景，项目既能保持基础占比，又能动态适应容器变化。