我正在尝试均匀地间隔这个布局,它基本上就像卡片布局。我很困惑为什么尽管做了 justify-content: space- Between 或 space-evenly 但它没有间距。我希望“其他”的间距均匀。
这是我的 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>
这是我的 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%; }
我尝试回溯并再次执行,但我仍然无法弄清楚。谁能帮帮我吗?我迷路了
P粉4623289042024-01-30 00:40:50
从 .container .title
选择器中删除 width: 100%;
。
.container .title { display: flex; /* width: 100%; */ }