html - 如何让 flex-shrink 真正收缩一个元素？

Question

我有一个简单的 flex-box 布局，我希望中间的元素直接缩小，但我无法找到 flex-shrink 属性起作用的任何情况。

我已经尝试删除 flex-container 上的 flex-wrap 属性并更改 flex 元素的值，但它仍然不起作用？

在下面的代码中，如何让中间的 div 收缩到 flex-shrink 值 10，就像代码建议的那样？

非常感谢您的帮助。

body {
  padding: 20px;
  font-family: arial;
}

p {
  color: white;
}

.container {
  background-color: #666;
  max-width: 800px;
  height: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  padding: 10px;
  box-sizing: border-box;
}

.item1 {
  flex: 1 1 0;
  background-color: red;
  min-width: 200px;
}

.item2 {
  flex: 2 10 0;
  background-color: blue;
}

.item3 {
  flex: 1 1 0;
  background-color: green;
}

<section class="container">

  <div class="item item1">
    <h1>ITEM1</h1>
  </div>

  <div class="item item2">
    <h1>ITEM2</h1>

  </div>
  <div class="item item3">
    <h1>ITEM3</h1>
    <p> - this is the third item with more content</p>
  </div>

</section>

https://codepen.io/emilychews/pen/rYeoza

Answer 1

这不是 flex-shrink 的工作方式。

flex-shrink 的工作是在元素之间分配容器中的负自由空间。这意味着当元素溢出容器时它会按比例缩小元素。

但是你的容器中没有溢出条件。

第一列 (.item1) 的宽度为 200px。

您的第二列 (.item2) 没有固定宽度。它被设置为占用可用空间。

您的第三列 (.item3) 没有固定宽度。它还设置为占用可用空间。

因此，flex-shrink 没有任何作用。在 width: 800px 的容器中，仅使用 200px，永远不会调用 flex-shrink。

您在三列(分别为 1、10 和 1)上启用了 flex-shrink。如果您对它们全部禁用 flex-shrink，您会发现它对布局没有影响。

这是您的演示，其中 flex-shrink: 0 应用于所有三次:revised codepen

有关 flex-shrink 工作原理的详细说明，请参阅此帖子:

• > How does flex-shrink factor in padding and border-box?