Question

我有一个简单的弹性框布局，我希望中间项目缩小，但我无法得到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）宽度为200像素。

您的第二列（.item2）没有固定宽度。它被设置为消耗自由空间。

您的第三列（.item3）没有固定宽度。它也被设置为消耗自由空间。

因此，flex-shrink无关。在width: 800px的容器中，只使用了200px，flex-shrink永远不会被调用。

您的三列已启用flex-shrink（分别为值1,10和1）。如果您对所有这些内容都停用了flex-shrink，那么您会注意到它对布局没有任何影响。

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

有关flex-shrink如何运作的详细说明，请参阅此帖子：

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

如何实现flex-shrink实际缩小项目？

1 个答案: