Tailwindcss响应式设计之: Flex-shrink

flex-shrink 是 CSS Flexbox 布局中的一个属性，用于控制当 flex 容器中的项目空间不足时，项目的缩小比例。它定义了一个 flex 项目的缩小能力。如果容器中的空间不足，flex-shrink 属性会决定该项目应缩小多少。

语法

.item {
  flex-shrink: <number>;
}
 

• <number>：指定缩小比例的值，默认为 1，即项目可以缩小。值越大，项目越容易被缩小。

工作原理

当容器的空间不足以容纳所有项目时，flex-shrink 影响每个项目缩小的比例。缩小的空间会根据 flex-shrink 的值进行分配。如果 flex-shrink 为 0，项目将不会缩小，而其他项目将会缩小更多。

示例 1：默认 flex-shrink: 1

<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;
}
 
.item {
  flex-basis: 200px;
  flex-shrink: 1; /* 可以缩小 */
}
 

当容器宽度不足时，所有 item 项目将按相同比例缩小。

示例 2：不同的 flex-shrink 值

<div class="container">
  <div class="item" style="flex-shrink: 1;">Item 1</div>
  <div class="item" style="flex-shrink: 2;">Item 2</div>
  <div class="item" style="flex-shrink: 0;">Item 3</div>
</div>
 

 
.container {
  display: flex;
  width: 400px;
}
 
.item {
  flex-basis: 200px;
}
 

在这个例子中，Item 3 的 flex-shrink 为 0，所以它不会缩小，而 Item 2 会比 Item 1 缩小得更多，因为它的 flex-shrink 值为 2。

总结

• flex-shrink: 1：项目可以按默认比例缩小。
• flex-shrink: 0：项目不会缩小。
• flex-shrink: 2 或更高：项目缩小的比例比其他项目更大。

flex-shrink 用于处理当空间不足时如何缩小 flex 项目，从而使布局更加灵活。

Tailwindcss响应式设计