flex 布局一方被挤压

在 Flexbox 布局中，当容器的空间不足以容纳所有项目时，会发生挤压。默认情况下，Flex 项目不会被挤压，它们会保持其原始大小。然而，你可以通过设置一些属性来控制这种挤压行为。

首先，你可以使用 `flex-shrink` 属性来定义项目在空间不足时的收缩比例。默认情况下，该属性的值为 1，表示所有项目都可以被收缩。如果你不希望某个项目被收缩，可以将其 `flex-shrink` 属性设为 0。

另外，你还可以使用 `flex-basis` 属性来定义项目的初始大小。通过设置一个较小的 `flex-basis` 值，你可以使某个项目更容易被挤压。

以下是一个示例代码，展示了如何使用这些属性来控制项目的挤压行为：

.container {
  display: flex;
}

.item {
  flex-shrink: 1; /* 默认值为 1，表示可以被收缩 */
  flex-basis: 0; /* 初始大小为 0 */
}

.item:not(:last-child) {
  margin-right: 10px; /* 为了更好地展示效果，给项目之间添加了一些间距 */
}

在上面的示例中，`.container` 是 Flex 容器的类选择器，`.item` 是 Flex 项目的类选择器。通过调整 `.item` 的 `flex-shrink` 和 `flex-basis` 值，你可以控制项目在空间不足时的挤压行为。

希望这个解答能够帮助到你！如果有任何问题，请随时提问。