防止 flexbox 收缩

Question

我正在使用 flexbox 布局页面，因为 growing 行为很有用。但我想完全防止 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;
}

Answer 1

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

Answer 2

添加一个 min-width 以及您想要的最小值。 Flexbox 不会将宽度缩小到最小宽度以下。

Answer 3

您可以尝试申请child:

.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>

Answer 4

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

Answer 5

Flex-shrink 对我不起作用。

我最终在 children 上使用了 white-space: nowrap;。

这并不适用于所有情况，但如果您的 flex parent 的 children 是 one-liners 文本，它可能就可以了。

（如果使用 TailwindCSS：whitespace-nowrap）

Answer 6

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

设置为flex-child这个prop:

明确支持 flex-shrink: 0;
或使用 shorthand flex prop flex: 1 0; /* Two values syntax: flex-grow | flex-basis */

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

Answer 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>

Answer 8

这里已经有很好的答案了。对我有用的是子元素上的 min-width 属性和父元素上的 flex-wrap。

下面是工作演示。您会注意到橙色子项的最小宽度固定为 240 像素，它可以展开，但不会低于 240 像素。

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  background-color: #e1eaf4;
}

.child {
  margin: 4px 8px;
  padding: 12px 0;
  border-radius: 4px;
  outline: 4px solid #fff;
  background-color: #3794fe;
  color: #fff;
  text-align: center;
}

.child:nth-child(1) {
  flex-grow: 1;
}

.child:nth-child(2) {
  flex-grow: 1;
  min-width: 240px;
  background-color: #e47f0b;
}

.child:nth-child(3) {
  flex-grow: 1;
}

<div class="container">
  <div class="child">
    <p>Child 1</p>
  </div>
  <div class="child">
    <p>Child 2</p>
  </div>
  <div class="child">
    <p>Child 3</p>
  </div>
</div>

防止 flexbox 收缩

Prevent flexbox shrinking

css

flexbox