当前位置：首页 > news >正文

如何理解flex: 1 1 50%

news 2025/7/16 10:33:42

在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）。

示例场景：

<!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%