面试官：flex：1代表什么

作者：来源前端

> 顺便吆喝一声，如果你计算机、软件工程、电子等相关专业本科及以上学历，欢迎来共事。
[[技术大厂]，前后端可投

 理解flex属性 :crazy_face:

在flexbox布局中，flex属性是用来控制项目的伸缩性的。它是一个复合属性，包含了flex-grow、flex-shrink和flex-basis这三个子属性。

* 在 Flexbox 中，每个子元素都拥有一个 "flex" 属性，用于控制其在容器中的伸缩行为。
* "flex" 属性是一个简写属性，包含了 "flex-grow"、"flex-shrink" 和 "flex-basis" 这三个属性的值。
* 语法格式为：`flex: <flex-grow> <flex-shrink> <flex-basis>;`
* flex-grow：指定项目在剩余空间中所占据的比例，默认值为0，表示项目不会伸展。当设置为正数时，表示该项可以扩展的比例，相对于其他Flex项的比例。
* flex-shrink：指定项目在空间不足时的收缩比例，默认值为1，表示项目会按比例收缩。当设置为0时，该项不会收缩。
* flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。

通常情况下，我们会使用flex的简写形式，即通过一个值来同时设置flex-grow、flex-shrink和flex-basis。而其中的flex: 1就是最见的简写形式之一。

理解flex: 1的作用

当我们将一个项目的flex属性设置为1时，相当于将其分配了一个相对于其他项目相同的可伸缩空间。换句话说，flex: 1会使得该项目尽可能地占据父容器中的剩余空间，但不会影响到其他项目。

css

复制代码

```
flex: 1; /* 等同于 flex: 1 1 0%; */
```

* `flex-grow` 设置为 1，表示该项可以在父容器内扩展，占据所有可用的额外空间。
* `flex-shrink` 设置为 1，表示该项可以在空间不足时收缩，以避免溢出。
* `flex-basis` 设置为 0%，表示项目在分配额外空间之前不占用空间，会自动填充所有可用空间。

实际运用示例

这种设置对于实现灵活的、响应式的布局非常有用。例如，我们可以将一个导航栏中的项目设置为flex: 1，这样它们就会自动平分导航栏的宽度，无论导航栏的宽度是多少，都能够保持平均分配。

假设我们有一个导航栏，其中包含了若干个链接。我们希望这些链接能够水平排列，并且在导航栏宽度发生变化时能够自动调整大小，保持平均分配。

HTML结构可能如下所示：

html

复制代码

```
<nav class="navbar">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
```

对应的CSS样式如下：

css

复制代码

```
.navbar {
  display: flex;
}

.navbar a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}
```

在这个示例中，我们通过将链接的flex属性设置为1，实现了它们的平均分配。无论导航栏的宽度是多少，链接都会自动调整大小，以适应父容器的空间。

拓展

**flex: 1" 与其他值的比较**：

* "flex: 1" 是最常用的设置，因为它能够让子元素自动填充剩余空间，使得布局更加灵活。
* 与之相对的，"flex: 0" 则意味着子元素不会自动填充剩余空间，而是根据其内容或固定尺寸进行布局。
* "flex: none" 则表示子元素不可伸缩，其大小仅受到 "flex-basis" 的限制，不会根据剩余空间自动调整大小。