我很困惑为什么我不能在这个问题上 justify-content: space- Between 或 space-evenly ?
P粉320361201
P粉320361201 2024-01-29 09:54:16
[React讨论组]

我正在尝试均匀地间隔这个布局,它基本上就像卡片布局。我很困惑为什么尽管做了 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粉320361201
P粉320361201

全部回复(1)
P粉462328904

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

.container .title {
    display: flex;
    /* width: 100%; */
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号