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

Question

我正在尝试使用 flexbox 将容器内显示的所有字母均匀地间隔开来。现在，如果我输入像“我喜欢学习代码”这样的句子，所有元素都显示在容器中并且工作正常，但是如果我使用像“冰箱”这样的长词，字母就会从容器中出来。但是我试图将所有字母都保留在容器中，无论单词有多长。我尝试了所有可用的 flexbox 技术，但没有运气。也尝试了容器上的max-width。我错过了什么？下面是代码沙盒中的代码： 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:&nbsp;20px;跟&nbsp;&nbsp;padding:&nbsp;20px&nbsp;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;}