Je ne comprends pas pourquoi je ne peux pas justifier le contenu : espace-entre ou espacement uniformément sur cette question ?

Question

J'essaie d'espacer uniformément cette mise en page, c'est essentiellement comme une mise en page de carte. Je ne comprends pas pourquoi il n'a pas d'espacement malgré le fait de justifier-contenu : espace-Entre ou espace-uniformement. Je veux que « l’autre » soit uniformément espacé.

C'est mon JSX

<section className="skills-wrapper">
    <div className="content-wrapper">
        <h1>Tech-Stack</h1>
        <div className="container">
            <div className="title">
                <h2>Web Development</h2>
                <div className="box">
                    <div className="name">
                    </div>
                </div>
            </div>
            <div className="title">
                <h2>Software Development</h2>
                <div className="box">
                    <div className="name">
                     </div>
                </div>
            </div>
            <div className="title">
                <h2>Others</h2>
                <div className="box">
                    <div className="name">
                     </div>
                </div>
            </div>
        </div>
    </div>
</section>

Voici mon CSS :

.skills-wrapper{
  width: 100%;
  height: 100vh;
  background: #CCD6F6;
}

.content-wrapper{
  width: 100%;
  max-width: 75.5em;
  padding: 1.875em;
  margin: 0 auto;
}

.content-wrapper h1{
  font-size: 2rem;
  color: #E1065E;
  padding: 0.524em 0;
}

.container{
  background: #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container .title{
  display: flex;
  width: 100%;
}

J'ai essayé de revenir en arrière et d'exécuter à nouveau, mais je n'arrive toujours pas à comprendre. Quelqu'un peut-il m'aider? je suis perdu

Answer 1

De .container .title 选择器中删除 width: 100%;.

.container .title {
    display: flex;
    /* width: 100%; */
}