深入理解Flex布局中的basis、grow、shrink属性用法，一文搞定！

前言

在使用Flex布局的时候，大家难以理解的是flex-basis、flex-grow、flex-shrink几个属性的用法。在平时面试时，大多数人也只能答出Flex布局基础的一些用法，当深入询问到这些属性的时候，大多数人都回答不上来了。现在就来深入理解这些属性的含义和用法。

1. flex-basis

flex-basis属性定义了在分配剩余空间之前，元素的初始大小。它可以是一个长度值（例如“100px”或“50%”）或“auto”。

• 当flex-basis被设置为一个长度值时，元素的初始大小将是该值。
• 当flex-basis被设置为“auto”时，元素的初始大小将是其内容的实际大小。

2. flex-grow

flex-grow属性定义了元素在分配剩余空间时的增长因子。它是一个无单位的数字，默认为0。

• 当flex-grow被设置为0时，元素不会增长。
• 当flex-grow被设置为一个正数时，元素将在分配剩余空间时按比例增长。
• 当flex-grow被设置为一个负数时，元素将在分配剩余空间时按比例缩小。

3. flex-shrink

flex-shrink属性定义了元素在分配剩余空间时的收缩因子。它是一个无单位的数字，默认为1。

• 当flex-shrink被设置为0时，元素不会收缩。
• 当flex-shrink被设置为一个正数时，元素将在分配剩余空间时按比例收缩。
• 当flex-shrink被设置为一个负数时，元素将在分配剩余空间时按比例增长。

4. 实例演示

为了更好地理解这些属性的用法，我们来看一个实例。假设我们有一个Flex容器，其中包含三个元素：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

我们为容器设置了以下样式：

.container {
  display: flex;
  flex-direction: row;
  width: 500px;
}

.item {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}

在这个实例中，每个元素的初始大小都是100px。当容器的宽度增加时，元素将按比例增长。当容器的宽度减少时，元素将按比例缩小。

总结

flex-basis、flex-grow和flex-shrink属性是Flex布局中的重要属性。通过理解和掌握这些属性的用法，我们可以轻松实现复杂布局。