在前端页面布局开发中，弹性布局已经成为主流的布局方案之一，而css flex属性是控制弹性布局行为的关键属性，它能够让开发者灵活地调整弹性容器内子元素的排列方式、空间分配和缩放规则，适配不同屏幕尺寸下的布局需求。
flex属性的基础概念
要使用flex属性控制弹性布局，首先需要明确两个核心角色：弹性容器和弹性子元素。当我们给一个元素设置display: flex或者display: inline-flex之后，这个元素就会成为弹性容器，它的直接子元素会自动成为弹性子元素，此时就可以在弹性子元素上使用flex属性来控制其布局行为。
flex属性其实是三个子属性的简写，完整语法为：
/* flex属性完整语法 */ flex: flex-grow flex-shrink flex-basis;
这三个子属性分别对应不同的布局控制逻辑，下面我们逐一拆解。
flex子属性的作用解析
flex-grow：控制剩余空间分配
flex-grow的作用是定义弹性子元素的放大比例，默认值为0，意思是如果存在剩余空间，子元素也不会放大。它的取值是一个非负数字，数值越大，分配到的剩余空间越多。
举个例子，假设弹性容器的宽度是1000px，三个弹性子元素的基础宽度都是200px，那么总基础宽度是600px，剩余空间是400px。如果三个子元素的flex-grow分别设置为1、2、1，那么总放大比例是4，第一个子元素会分到400 * 1/4 = 100px，最终宽度是300px；第二个子元素分到400 * 2/4 = 200px，最终宽度是400px；第三个子元素和第一个一样，最终宽度是300px。
flex-shrink：控制空间不足时的收缩
flex-shrink的作用是定义弹性子元素的缩小比例，默认值为1，意思是如果空间不足，子元素会等比例缩小。取值也是非负数字，数值越大，收缩的幅度越大。
同样是上面的例子，假设弹性容器宽度是500px，三个子元素基础宽度都是200px，总基础宽度600px，超出了100px。如果三个子元素的flex-shrink分别设置为1、2、1，总收缩比例是4，第一个子元素需要收缩100 * 1/4 = 25px，最终宽度175px；第二个收缩100 * 2/4 = 50px，最终宽度150px；第三个收缩25px，最终宽度175px。
flex-basis：定义子元素的基础大小
flex-basis用来定义弹性子元素在分配剩余空间之前的基础大小，默认值是auto，也就是子元素的原始大小。它可以设置为具体的长度值，比如200px、50%，也可以设置为content，意思是根据子元素的内容来决定基础大小。
需要注意的是，如果同时设置了width和flex-basis，flex-basis的优先级会更高，会覆盖width的设置。
flex属性的常见简写用法
在实际开发中，我们很少会同时设置三个子属性，常见的简写方式有以下几种：
flex: 1：等同于flex: 1 1 0%，意思是子元素可以放大、可以缩小，基础大小为0，会占满所有剩余空间，常用于实现等分布局。flex: auto：等同于flex: 1 1 auto，子元素可以放大缩小，基础大小为自身原始大小，会根据剩余空间调整。flex: none：等同于flex: 0 0 auto，子元素不会放大也不会缩小，大小由自身内容决定，常用于固定大小的组件。flex: 2 1 200px：自定义三个子属性的值，放大比例2，缩小比例1，基础大小200px。
常见弹性布局场景实现
场景1：实现导航栏的左右分布
很多页面的导航栏需要左侧是logo，右侧是导航链接，中间留空，用flex属性可以很轻松实现。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.nav {
display: flex;
align-items: center;
padding: 0 20px;
height: 60px;
background-color: #f5f5f5;
}
.logo {
font-size: 20px;
font-weight: bold;
}
.nav-links {
display: flex;
gap: 20px;
margin-left: auto;
}
</style>
</head>
<body>
<div class="nav">
<div class="logo">我的网站</div>
<div class="nav-links">
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
</div>
</body>
</html>
这里给导航容器设置display: flex，导航链接容器设置margin-left: auto，就会自动把导航链接推到右侧，不需要额外计算间距。
场景2：实现卡片列表的等分布局
需要在一行显示多个等宽的卡片，并且自适应屏幕宽度，也可以用flex属性实现。
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.card {
/* 每个卡片占剩余空间的1份，基础大小200px，最小宽度200px */
flex: 1 1 200px;
height: 300px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
这里给卡片设置flex: 1 1 200px，意思是卡片最小宽度200px，当一行放不下时会自动换行，放得下时会等比例放大占满整行，实现自适应等分布局。
使用flex属性的注意事项
- flex属性只对弹性子元素生效，如果父元素没有设置
display: flex，设置flex属性不会有效果。 - flex属性是简写属性，如果只设置一个值，会按照规则解析：如果是数字，会被解析为flex-grow，比如
flex: 2等同于flex: 2 1 0%；如果是长度值，会被解析为flex-basis，比如flex: 200px等同于flex: 1 1 200px。 - 如果需要兼容旧版本的浏览器，需要注意flex属性的语法差异，部分旧浏览器可能需要添加前缀。
弹性布局的核心是让容器能够自动调整子元素的排列和大小，flex属性就是实现这个调整的核心工具，理解三个子属性的作用逻辑，就能应对大部分弹性布局的需求。
cssflex弹性布局flex_containerflex_item修改时间：2026-07-16 11:27:35