css弹性布局通过flex容器和flex子元素的配合实现灵活的页面排版，flex属性是作用在flex子元素上的核心属性，用于定义子元素如何分配容器的剩余空间，控制子元素的弹性伸缩行为。
flex属性的基本语法
flex属性是flex-grow、flex-shrink、flex-basis三个属性的简写形式，完整语法如下：
/* 完整写法 */ flex: flex-grow flex-shrink flex-basis; /* 常见简写形式 */ flex: 1; /* 等价于 flex: 1 1 0% */ flex: auto; /* 等价于 flex: 1 1 auto */ flex: none; /* 等价于 flex: 0 0 auto */
三个子属性的含义
- flex-grow：定义子元素的放大比例，默认值为0，表示即使有剩余空间也不会放大。如果所有子元素的flex-grow值都为1，则它们会等分剩余空间。
- flex-shrink：定义子元素的缩小比例，默认值为1，表示当空间不足时子元素会缩小。如果某个子元素的flex-shrink值为0，空间不足时它不会缩小。
- flex-basis：定义子元素在分配剩余空间之前占据的主轴空间，默认值为auto，即子元素本身的尺寸。可以设置为固定值比如200px，或者百分比。
不同场景下的flex属性设置示例
场景1：子元素等分容器空间
当希望所有子元素平均分配容器的可用空间时，给每个子元素设置flex: 1即可：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
width: 800px;
height: 200px;
border: 1px solid #ccc;
}
.item {
flex: 1;
border: 1px solid #f00;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">子元素1</div>
<div class="item">子元素2</div>
<div class="item">子元素3</div>
</div>
</body>
</html>
上述代码中三个子元素会各占容器三分之一的宽度，即使容器宽度变化，三个元素也会始终保持等分。
场景2：固定某个子元素尺寸，其余子元素弹性分配
如果希望左侧子元素固定宽度200px，右侧两个子元素弹性分配剩余空间，可以这样设置：
.container {
display: flex;
width: 1000px;
height: 200px;
}
.left {
flex: 0 0 200px; /* 不放大不缩小，固定基础尺寸200px */
background: #eee;
}
.right-item {
flex: 1; /* 等分剩余空间 */
background: #ccc;
}
场景3：控制子元素的缩放优先级
当容器空间不足时，可以通过flex-shrink控制哪些子元素优先缩小：
.container {
display: flex;
width: 600px;
}
.item1 {
flex: 1 2 200px; /* 空间不足时缩小比例更高 */
background: #f00;
}
.item2 {
flex: 1 1 200px; /* 默认缩小比例 */
background: #0f0;
}
.item3 {
flex: 1 0 200px; /* 空间不足时不缩小 */
background: #00f;
}
当容器宽度小于600px时，item3会保持200px宽度，item1会比item2缩小得更多。
flex属性常见取值说明
| 取值 | 等价完整写法 | 适用场景 |
|---|---|---|
| flex: initial | flex: 0 1 auto | 子元素保持自身尺寸，空间不足时缩小，不放大 |
| flex: auto | flex: 1 1 auto | 子元素根据自身尺寸分配空间，可放大可缩小 |
| flex: none | flex: 0 0 auto | 子元素固定尺寸，不放大不缩小，常用于固定宽高的元素 |
| flex: 数字 | flex: 数字 1 0% | 子元素按比例分配剩余空间，常用于等分布局 |
注意事项
- flex属性只能作用在flex容器的直接子元素上，嵌套的子元素不会生效。
- 设置flex属性后，子元素的width属性在大部分情况下会被flex-basis覆盖，除非flex-basis设置为auto。
- 如果同时设置了flex属性和width，flex-basis的优先级更高，除非flex-basis为auto。
flex属性的简写形式会覆盖之前单独设置的flex-grow、flex-shrink、flex-basis属性，所以建议优先使用简写形式，避免属性冲突。