防止 flexbox 收缩答案

【问题标题】：Prevent flexbox shrinking防止 flexbox 收缩
【发布时间】：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 不应该用于整个页面布局。改用网格。

标签： css flexbox

【解决方案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>

【讨论】：