基本语法如下：
.selector {
flex: flex-grow flex-shrink flex-basis;
}
其中：
- flex-grow 定义了项目的放大比例，默认为 0。
- flex-shrink 定义了项目的缩小比例，默认为 1。
- flex-basis 定义了项目在主轴上的初始大小，默认为 auto。
这三个值可以按照这个顺序提供，也可以使用 flex 的缩写形式提供一个、两个或三个值。
以下是一些例子：
1. 使用全部三个值：
.flex-item {
flex: 1 0 200px;
}
这表示项目会根据可用空间等比例放大（flex-grow: 1），不允许缩小（flex-shrink: 0），初始大小为 200 像素（flex-basis: 200px）。
2. 使用两个值：
.flex-item {
flex: 2 1;
}
这表示项目会根据可用空间放大（flex-grow: 2），允许缩小（flex-shrink: 1），初始大小由内容决定（flex-basis: auto）。
3. 使用一个值：
.flex-item {
flex: 3;
}
这表示项目会根据可用空间放大（flex-grow: 3），允许默认缩小比例（flex-shrink: 1），初始大小由内容决定（flex-basis: auto）。
flex 属性是使用弹性盒子布局时的重要属性，它允许灵活地控制子项的大小和分布。
转载请注明出处：http://www.zyzy.cn/article/detail/4180/CSS