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

Question

我正在尝试使用 flexbox 使容器中显示的所有字母均匀分布。现在，如果我输入像“我喜欢学习代码”这样的句子，所有元素都显示在容器中并且可以正常工作，但是如果我使用像“冰箱”这样的长词，字母就会从容器中出来。但是无论单词有多长，我都试图将所有字母保留在容器中。我尝试了所有可用的 flexbox 技术，但没有运气。也在容器上尝试了最大宽度。我错过了什么？这是代码沙箱中的代码：https://codesandbox.io/s/modern-sun-3u7b3?file=/src/App.js

import React from "react";
import "./styles.css";

function App() {
  // let sentence = "I like learning code";
  let sentence = "refrigerator";
  const words = sentence.split(" ");

  return (
    <div className="pageContainer">
      {words.map((word, i) => (
        <div className="row" key={i}>
          {[...word].map((letter) => (
            <p className="letterBorder">{letter}</p>
          ))}
          {i === words.length - 1 ? null : <p className="whiteSpaceBorder"></p>}
        </div>
      ))}
    </div>
  );
}

export default App;

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

Answer 1

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

替换

padding: 20px;

与

  padding: 20px 0;

https://codesandbox.io/s/gracious-violet-qg1xt?file=/src/App.js

Answer 2

这就是 css 属性 flex-wrap 派上用场的地方。默认情况下，Flexbox 项目都尝试放入一行。但是，您可以使用 flex-wrap: wrap 将它们包装起来。

将其添加到您的行类中：

.row {
  display: flex;
  flex-wrap: wrap; /* Allow items in row to "wrap" to next line if needed */
  justify-content: space-evenly;
  min-width: 100%;
  align-content: flex-start;
}

请参阅this css-tricks page 以获得更好的视觉解释。