文本脱离 flexbox 容器

Question

我一直在学习用于布局的 flexbox，但一直无法弄清楚为什么文本没有包裹在 flex-item 内。文本像这样从容器中脱离出来：

html,
body {
  height: 100%;
}

.main {
  max-width: 10em;
  margin: 1em auto;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12em;
  border: 1px solid red;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item {
  padding: 5px;
  border: 1px solid black;
}

<div class="main">
  <div class="flex-row">
    <div class="flex-column">
      <div class="flex-item">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div class="flex-item">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </div>
    </div>
  </div>
</div>

Answer 1

您的文本之间没有空格。

该word-break属性的默认值为normal，这意味着连续的文本行没有换行符。

由于这些原因，您的文本不会包裹和溢出容器。

添加word-break: break-all到.flex-item.

html,
body {
  height: 100%;
}

.main {
  max-width: 10em;
  margin: 1em auto;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12em;
  border: 1px solid red;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-item {
  padding: 5px;
  border: 1px solid black;
  word-break: break-all; /* new */
}

<div class="main">
  <div class="flex-row">
    <div class="flex-column">
      <div class="flex-item">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div class="flex-item">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </div>
    </div>
  </div>
</div>

来自 MDN：

word-break

该word-breakCSS属性指定浏览器是否应插入换行符无论文本，否则溢出其内容框。

相反，overflow-wrap,word-break将在文本溢出其容器的确切位置创建一个中断（即使将整个单词放在自己的行上会否定中断的需要）。

价值观

normal

使用默认的换行规则。

break-all

为防止溢出，应在任意两个字符之间插入分词（不包括中文/日文/韩文文本）。

keep-all

中文/日文/韩文 (CJK) 文本不应使用分词符。非 CJK 文本行为与正常相同。

实际上还有另一个原因——弹性盒特定的——弹性项目溢出容器的原因。这是解释：

• 为什么 flex item 不会缩小超过内容大小？

要包含的项（无需文本换行），你可以申请min-width: 0，overflow: hidden或overflow: auto到.flex-column。

html,
body {
  height: 100%;
}

.main {
  max-width: 10em;
  margin: 1em auto;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12em;
  border: 1px solid red;
}

.flex-column {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* new */
  /* overflow: auto; */
  /* min-width: 0; */
}

.flex-item {
  padding: 5px;
  border: 1px solid black;
}

<div class="main">
  <div class="flex-row">
    <div class="flex-column">
      <div class="flex-item">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
      <div class="flex-item">
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      </div>
    </div>
  </div>
</div>