文本突破flexbox容器

Question

我一直在努力学习flexbox for layout，并且无法弄清楚为什么文本没有包装在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。

＆＃13;

＆＃13;

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 */
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

来自MDN：

  

word-break

     

word-break CSS属性指定浏览器是否为   应该在文本否则溢出的任何地方插入换行符   它的内容框。

     

与overflow-wrap相比，word-break会创建一个休息点   否则文本将溢出其容器的确切位置   （即使把整个单词放在自己的路线上也会消除这种需要   休息一下。）

           

<强>值

     

<强> normal

     

使用默认换行符规则。

     

<强> break-all

     

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

     

<强> keep-all

     

中文/日文/韩文（CJK）文本不应使用单词分隔符。   非CJK文本行为与普通行为相同。

实际上还有另一个原因 - 特定于flexbox - 为什么flex项溢出容器。以下是解释：

• Why doesn't flex item shrink past content size?

要包含项目（无需包装文本），您可以将min-width: 0，overflow: hidden或overflow: auto应用于.flex-column。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;