防止弹性项目缩小[重复]

Posted 2023-03-06

【中文标题】防止弹性项目缩小[重复]

【英文标题】：Prevent flex item from shrinking [duplicate]

【发布时间】：2017-09-07 17:09:16

【问题描述】：

示例：

#wrap 
  outline: 1px solid fuchsia;
  display: flex;


#left 
  background: tan;
  width: 100%;


#right 
  background: teal;
  width: 50px;
  height: 50px;

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

截图：

问题：

当我使用浏览器元素检查器时，我看到右侧框小于50px 宽，尽管它在 CSS 中具有固定宽度。为什么它基本上会发生？ 如何预防？

【问题讨论】：

请参阅副本中的 flex-shrink 因素部分以获得解释。

【参考方案1】：

在#left 上使用flex: 1 1; 而不是width:100%

#wrap 
  outline: 1px solid fuchsia;
  display: flex;


#left 
  background: tan;
  flex: 1 1;


#right 
  background: teal;
  width: 50px;
  height: 50px;

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

弹性：<positive-number>

相当于 flex: 1 0。 使弹性项目灵活并将弹性基础设置为零， 导致获得指定比例的项目 flex 容器中的可用空间。如果 flex 容器中的所有项目 使用这种模式，它们的大小将与指定的成正比 弹性系数。

Source

【讨论】：

如果我不使用flex 属性怎么办？在使用width:100% 时，我还能拥有50px × 50px 框吗？

@Mike 正确使用flexbox 是在left 元素上设置flex: 1。如果要保留width: 100%，请在right 上设置flex-shrink: 0，正如Stefan F. 在他的回答中所建议的那样。

【参考方案2】：

您还可以在#right 元素上使用 flex-shrink: 0; 以防止其收缩。

这只是定义了#right元素不应该被允许收缩，例如保持在 50 像素。

关于 flex 的更多信息有很多很好的文章，例如在css-tricks