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上没有发生的问题。是什么原因造成的？

为什么最小宽度：0在弹性方向：列上不起作用？

.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，主轴是水平，而横轴是垂直。
对于flex-direction: column，它们会切换，以使主轴为垂直和跨轴为水平，你知道的。

现在让我提醒您
justify-content，flex-grow，flex-shrink和flex-basis属性在主轴
上起作用 align-items适用于横轴

设置align-items: start时，您将覆盖默认的align-items: stretch，而您的flex-item可以接受大于width的任何min-width（因为{已指定{1}}或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 */
}

Answer 2

您只需要给div .b明确的宽度，否则该元素将扩展以适合内容。使用您的代码，这很简单：

.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;
  width: 100%;
}

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

弯曲方向上的神秘行为：列

2 个答案: