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

Question

我正在尝试使用 flexbox 将容器内显示的所有字母均匀地间隔开来。现在，如果我输入像“我喜欢学习代码”这样的句子，所有元素都显示在容器中并且工作正常，但是如果我使用像“冰箱”这样的长词，字母就会从容器中出来。但是我试图将所有字母都保留在容器中，无论单词有多长。我尝试了所有可用的 flexbox 技术，但没有运气。也尝试了容器上的max-width。我错过了什么？下面是代码沙盒中的代码： https://codesandbox.io/s/modern-sun-3u7b3?file=/src/App.jsimport 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 属性派上用场的地方。默认情况下，Flexbox 项目都尝试放在一行中。但是，您可以使用 使它们换行。flex-wrapflex-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;

}