Javascript 如何使用flexbox将所有元素保存在容器中？

我正在尝试使用flexbox使容器中显示的所有字母均匀分布。现在，若我输入像“我喜欢学习代码”这样的句子，所有元素都显示在容器中，工作正常，但若我使用像“冰箱”这样的长单词，字母就会从容器中出来。但我尽量把所有的字母都放在容器里，不管单词有多长。我尝试了所有可用的flexbox技术，但没有成功。也尝试了容器的最大宽度。我错过了什么？以下是代码沙盒中的代码：

---

这就是css属性

flex wrap

的用武之地。默认情况下，Flexbox项目都会尝试放在一行中。但是，您可以使用

flex-wrap:wrap

将它们包装起来

将其添加到您的行类：

.row{
显示器：flex；
灵活换行：换行；/*如果需要，允许行中的项目“换行”到下一行*/
对正内容：空间均匀；
最小宽度：100%；
调整内容：灵活启动；
}

---

有关更好的视觉解释，请参阅。

您的错误是由于letterBorder类的硬编码水平填充造成的

替换

padding: 20px;

与

---

事实上，我需要一排冰箱放在容器中。包装创建3行以适合冰箱。所以每行一个单词就是我想要达到的。但若单词像冰箱一样太长，它就会从容器里出来。啊，明白了。另一个答案描述了如何将字母边框填充改为

20px 0

，应该可以做到这一点。现在效果很好！非常感谢。额外的0是我所需要的。。。从来不知道填充物会影响flexbox。感谢您宝贵的一课。填充物并没有真正影响flexbox。Flexbox定义项目的高度、宽度和位置，填充在项目之间添加一些空间，使其超出容器的边界。

.letterBorder {
  border: 25px;
  background: grey;
  padding: 20px;
  width: 50px;
  height: 30px;
  flex-grow: 1;
  margin-right: 4px;
  margin-left: 4px;
}

.row {
  display: flex;
  justify-content: space-evenly;
  min-width: 100%;
  align-content: flex-start;
}

.whiteSpaceBorder {
  border: 25px;
  background: orange;
  padding: 20px;
  width: 50px;
  height: 30px;
  flex-grow: 1;
  margin-right: 4px;
  margin-left: 4px;
}

.pageContainer {
  border-radius: 1rem;
  text-align: center;
  background: lightcyan;
  height: 40rem;
  width: 30rem;
  margin: auto;
}

padding: 20px;

  padding: 20px 0;