CSS中的flex:1代表什么?

在现代 Web 开发中，CSS Flexbox 布局为我们提供了极其灵活的容器布局方式。在实际使用中，经常会看到这样的一行代码：

1
2
3

.item {
  flex: 1;
}

那么，flex: 1 究竟代表什么？本文将为你详细解析这一简写属性的含义，以及它在布局中的作用。

flex 属性的简写

flex 是一个简写属性，它同时设置三个属性值：

flex-grow
flex-shrink
flex-basis

当我们写下 flex: 1; 时，浏览器实际上将其解析为：

flex: 1 1 0%;

// 对应属性为
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

flex-grow: 1
flex-grow 定义了元素在父容器中如何分配剩余空间。设置为 1 意味着该元素可以等比例扩展，填充容器中剩余的可用空间。
flex-shrink: 1
flex-shrink 定义了元素在父容器空间不足时如何缩小。设置为 1 表示该元素可以以与其他元素相同比例收缩。
flex-basis: 0%
flex-basis 决定了在分配剩余空间之前，元素占据的初始空间。设置为 0% 意味着元素不会占用任何额外空间，而是完全依赖于 flex-grow 来分配空间。

flex: 1 的实际效果

将 flex: 1 应用到多个子元素上时，这些子元素会按照相同比例扩展和收缩，从而平分父容器中所有可用的剩余空间。

示例：

<!DOCTYPE html>
<htmllang="zh-CN">
<head>
  <metacharset="UTF-8">
  <metaname="viewport"content="width=device-width, initial-scale=1">
  <title>flex: 1 示例</title>
  <style>.container {
      display: flex;
      width: 600px;
      border: 1px solid #ccc;
    }
    .item {
      flex: 1;
      padding: 20px;
      text-align: center;
      border-right: 1px solid #ddd;
    }
    .item:last-child {
      border-right: none;
    }
  </style>
</head>
<body>
  <divclass="container">
    <divclass="item">盒子 1</div>
    <divclass="item">盒子 2</div>
    <divclass="item">盒子 3</div>
  </div>
</body>
</html>