css - flex 方向的神秘行为 : column

Question

当我写这样的代码时，我知道文本不会中断。

.a {
  display: flex;
  border: 1px solid yellow;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

这个问题的原因是min-width: auto将 flex 元素的文本宽度设置为 min-width .因此，这个问题用min-width: 0解决了.

.a {
  display: flex;
  border: 1px solid yellow;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  min-width: 0; /* add this code! */
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

接下来我写了这样一段代码。

然而，min-width该代码的一部分没有像我预期的那样工作，一个长词溢出了。这是一个在 flex-direction: row 没有发生的问题.这是什么原因？

为什么 min-width: 0 在 flex-direction: column 中不起作用？

.a {
  display: flex;
  flex-direction: column;
  border: 1px solid yellow;
  align-items: start;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  min-width: 0;
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Answer 1

对于flex-direction: row，主轴是水平，横轴是< em>垂直。
对于 flex-direction: column，它们会切换，因此 ma​​in-axis 是 vertical 而 cross-axis 是 水平，你知道的。

现在让我提醒你
justify-content、flex-grow、flex-shrink 和 flex-basis 属性适用于 主轴
align-items 适用于横轴

当您设置 align-items: start 时，您将覆盖默认的 align-items: stretch 并且您的 flex-item 可以采用任何大于 min-width 的 width(因为既没有指定 width 也没有指定 max-width)。

要实现所需的行为，只需删除 align-items: start;
min-width: 0 也可以安全删除，因为它什么都不做。

请看下面的片段:

.a {
  display: flex;
  flex-direction: column;
  border: 1px solid yellow;
  /* align-items: start; let's use default value instead */
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  /* min-width: 0; this does nothing */
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>