为什么min-width：0对我的flex元素不起作用？

debugcn 发表于 Dev

伊娃

我读过，min-width是auto在Flexbox的面向Flex项。这意味着widthflex-item取决于其内部的内容（flex-item不能小于内部最大的单词，当然flex-item不能小于具有固定宽度的内部元素）。

这意味着我可以为我的flex-item建立，min-width: 0并且我的元素将像以前一样继续缩小，但事实并非如此。为什么？我怎么了？

我的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  border: 3px solid red;
}

.second_group_block, .first_group_block {
  display: flex;
  min-width: 0;
  border: 3px solid green;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  min-width: 0;
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block:nth-child(3) {
  margin: 0;
}

.block:nth-child(6) {
  margin: 0;
}

<div class="parent">
  <div class="first_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="second_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

PS在研究了此示例之后，我发现也许我之前描述的此行为的原因是其弯曲方向以及建立主轴和横轴的属性。您可以在这里查看第二个示例

为什么会这样工作？

陪同Afif

您的所有期望都是正确的，但您缺少一件事。.parent元素的方向是第一列，因此最小宽度对子元素没有影响，因为在横轴上没有溢出限制（也没有收缩效果）。要添加此类限制，只需使用max-width:100%

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  border: 3px solid red;
}

.second_group_block, .first_group_block {
  display: flex;
  min-width: 0;
  max-width:100%; /* here */
  border: 3px solid green;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  min-width: 0;
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block:nth-child(3) {
  margin: 0;
}

.block:nth-child(6) {
  margin: 0;
}

<div class="parent">
  <div class="first_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="second_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

值得注意的是，保持拉伸对齐也会产生相同的结果：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  /*align-items: center; removed*/
  border: 3px solid red;
}

.second_group_block, .first_group_block {
  display: flex;
  min-width: 0;
  border: 3px solid green;
  justify-content:center;
}

.first_group_block {
  margin-bottom: 10px;
}

.block {
  min-width: 0;
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block:nth-child(3) {
  margin: 0;
}

.block:nth-child(6) {
  margin: 0;
}

<div class="parent">
  <div class="first_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="second_group_block">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。