li中加flex-shrink: 0;

在 CSS 中，flex-shrink 属性指定了项目在容器中收缩的比例。默认情况下，项目可以根据需要缩小以适应容器，但是如果你想要禁止某个项目缩小，可以将 flex-shrink 设置为 0。

举个例子，假设你有一个容器，里面有三个 div 元素，它们的 flex-grow 和 flex-shrink 属性分别为 1 和 0。这意味着这三个项目会平均地占据剩余的可用空间，但是如果容器的宽度不足以容纳它们，它们不会缩小。如果你将其中一个 div 元素的 flex-shrink 属性设置为 0，那么它将始终保持其原始大小，而其他两个元素将根据需要缩小。

总之，通过将 flex-shrink 属性设置为 0，你可以禁止某个项目在容器中缩小，从而更好地控制项目的大小。

相关问题

flex-shrink:0

flex-shrink:0是一个CSS属性，用于指定一个flex项目在容器中收缩的能力。当设置为0时，表示该项目不会被收缩，即使容器空间不够时也不会缩小该项目的尺寸。 这意味着如果容器的空间不足以容纳所有的flex项目，那些设置了flex-shrink:0的项目将保持原始的尺寸，而其他项目将根据其在flex容器中的比例进行收缩以适应剩余空间的分配。 这种属性设置可以用于确保某些特定的项目在空间有限的情况下不会被压缩，从而保持其可视性或功能的完整性。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [flex布局属性详解](https://blog.csdn.net/qq_41864575/article/details/97915741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [flex 的 三个参数：flex-grow、flex-shrink、flex-basis](https://blog.csdn.net/qq_52855464/article/details/126242117)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

flex-shrink：0

flex-shrink: 0是CSS中flex布局属性的一种设置，它用于控制弹性子元素在父容器空间不足时的缩小行为。当设置为0时，弹性子元素不会缩小，会保持其原有的大小。

这个属性常用于父容器的宽度固定，而弹性子元素的宽度根据内容自适应的情况下，可以避免子元素过度缩小导致内容溢出，同时也可以避免出现水平滚动条。

通过设置flex-shrink: 0，弹性子元素将保持其原有的宽度，不会随着父容器宽度的变化而自动缩小。这意味着当父容器的宽度不足以容纳所有子元素时，部分子元素可能会被截断或溢出父容器。