防止 flexbox 收缩

Posted 2023-03-06

【中文标题】防止 flexbox 收缩

【英文标题】：Prevent flexbox shrinking

【发布时间】：2015-05-23 07:13:09

【问题描述】：

我正在使用 flexbox 来布局页面，因为 growth 行为很有用。但我想完全防止 shrinking 行为。

无论如何要管理这个？

示例代码：

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div></div>
    <div></div>
</div>

CSS

.flex-vertical-container 
    display: flex;
    flex-direction: column;


.flex-box 
    flex: 1;

【问题讨论】：

Flex 不应该用于整个页面布局。改用网格。

【参考方案1】：

尝试在.flex-box 上将flex-shrink 属性设置为0。

【讨论】：

由于某种原因设置flex-shrink: 0; 不起作用，但手动设置：flex-shrink: 1 0 auto; 工作正常...

弹性收缩：1 0 自动；似乎不是有效的属性。

他们可能是指flex: 1 0 auto;

在这种特定情况下，将 flex-shrink 属性设置为 0 似乎是不够的。使用flex-direction:column 时，您还需要设置min-width 值来完成此目标。

【参考方案2】：

添加一个min-width，无论您希望该框的最小可能值是什么。 Flexbox 不会将宽度缩小到最小宽度以下。

【讨论】：

min-width 确实可以正常工作，但在响应式设计中，如果它小于指定的空间，它不会随空间调整。不过，flex-shrink 根本不适合我。

此外，safari 仍然使用 min-width 属性来进行 flexbox 行为，导致 IE - Safari 和“其他”之间出现奇怪的跨浏览器问题。检查我可以使用的注释：caniuse.com/#search=flexbox

【参考方案3】：

你可以尝试申请给孩子：

.flex-box
    width: max-content;

最终结果：

.flex-vertical-container
  display: flex;
  flex-direction: column;

.flex-vertical-container div
  background: gray;

.flex-box
  width: max-content;

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div>This is shrinking</div>
    <div>This is shrinking</div>
</div>

【讨论】：

除非您的目标是非常特定的浏览器，否则max-content 不会是一个好的通用选择。

IE 和 Edge 不支持。受 Chrome、Safari 和 Firefox 支持。 caniuse.com/#search=max-content

【参考方案4】：

如果您的flex-direction 和我一样是row，请尝试将孩子的宽度设置为 100%。这解决了我的缩小问题。

【参考方案5】：

Flex-shrink 对我不起作用。

我最终对孩子们使用了white-space: nowrap;。

这不适用于所有情况，但如果您的 flex 父级的子级是单行文本，则可能。

---

（如果使用 TailwindCSS：whitespace-nowrap）

【参考方案6】：

有两种变体可以防止收缩flex-child

设置为 flex-child 这个道具：

显式支持flex-shrink: 0; 或使用简写flex prop flex: 1 0; /* Two values syntax: flex-grow | flex-basis */

在你的情况下 flex-child 是 .flex-box

【参考方案7】：

flex-wrap: wrap; 有效 https://jsbin.com/zajojanamo/8/edit?html,css,output

main 
  width: 200px;
  height: 200px;
  background: green;
  display: flex;
  flex-wrap: wrap;


div 
  box-sizing: border-box;
  border: 4px solid;
  padding: 16px;
  width: 50%;
  background: lightblue;

<main>
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</main>