h5制作网站google chrome谷歌浏览器
在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% |
此设定适合需要响应式伸缩的场景，项目既能保持基础占比，又能动态适应容器变化。