フレックスボックスを使用して、コンテナ内に表示されるすべての文字を等間隔に配置しようとしています。今のところ、「コードを学ぶのが好き」のような文を入力すると、すべての要素がコンテナ内に表示されて問題なく動作しますが、「冷蔵庫」のような長い単語を使用すると、文字がコンテナから出てきます。しかし、私は単語がどれほど長くても、すべての文字をコンテナ内にとどまらせようとしています。利用可能なすべてのフレックスボックステクニックを試しましたが、うまくいきませんでした。コンテナでも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;
}
エラーは、letterBorderクラスのハードコードされた水平方向のパディングが原因です。
交換
padding: 20px;
と
padding: 20px 0;
https://codesandbox.io/s/gracious-violet-qg1xt?file=/src/App.js
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加