CSS flex 语法
在 CSS 中，flex 是一个复合属性，用于同时设置 flex-grow、flex-shrink、flex-basis 这 3 个属性。
语法：
flex: grow shrink basis;说明：
参数 grow 是 flex-grow 的取值，参数 shrink 是 flex-shrink 的取值，参数 basis 是 flex-basis 的取值。因此，flex 属性的默认值为 “0 1 auto”。
需要注意的是，flex: 1 等价于 flex: 1 1 0%（注意：不是 auto），flex: 2 1 0%; 还可以简写为 flex: 2;，以此类推。在实际开发中，我们都是推荐使用类似 flex: 1; 这种简写方式。
此外，小伙伴们还要清楚以下几点。
- 在实际开发中，优先使用 flex 属性，而不是单独写 flex-grow、flex-shrink、flex-basis 这 3 个属性。
- flex 属性只能用于弹性容器的子项，即作为 display: flex; 或 display: inline-flex; 元素的子元素。
- flex 控制项目在主轴上的尺寸和伸缩行为。主轴的方向由父容器的 flex-direction 属性决定。
CSS flex 摘要
| 属于 | CSS flex 布局 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 0 1 auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS flex 示例
接下来，我们通过一个简单的例子来讲解一下 flex 属性是如何使用的。
示例：flex 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
display: flex;
width: 300px;
height: 100px;
}
.box > div:nth-child(1) {
flex: 1;
background: red;
}
.box > div:nth-child(2) {
flex: 2;
background: green;
}
.box > div:nth-child(3) {
flex: 3;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，“flex: 1;” 其实等价于 “flex: 1 1 0%;”，“flex: 2;” 等价于 “flex: 2 1 0%;”，而 “flex: 3;” 等价于 “flex: 3 1 0%;”。也就是说 flex 取值只有一个数时，表示只设置了 flex-grow 这个属性的取值。
