如何在 Css 和 ReactJs 中应用/设置所有项目中心和项目之间的空间答案

【问题标题】：How to apply/style All Item Center and space Between Items In Css and ReactJs如何在 Css 和 ReactJs 中应用/设置所有项目中心和项目之间的空间
【发布时间】：2023-01-18 01:03:37
【问题描述】：

 justify-content: space-evenly;

工作正常但没有得到预期的输出

实际上我想要实现的是

这是我可以创造的

让我告诉你我的代码

function App() {
    return (<div className="App">
        <div className={'card'}>
            // My Stuff
            <Footer/>
        </div>
    </div>);
}


function Footer() {
    return (<div className={'footer'}>
        <img src={TwitterIcon}/>
        <img src={FaceBookIcon}/>
        <img src={InstagramIcon}/>
        <img src={GithubIcon}/>
    </div>)
}

body {
    margin: 0;
    background-color: #23252C;
}

.App {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100vh;*/
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #23252C;
    padding-bottom: 0px;
}

.card {
    border-radius: 08px;
    overflow: hidden;
    background-color: #1A1B21;
    max-width: 28%;
    padding-bottom: 0px;
}

.footer {
    background-color: #161619;
    padding: 15px 10px 15px 10px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
}

【问题讨论】：

将 justify-content: space-evenly 更改为 justify-content: center 并尝试使用 gap。请记住IE doesn't supportgap。
感谢@RicoHancock justify-content: space-evenly 填充它的作品

标签： css reactjs flexbox jsx

【解决方案1】：

您目前正在将页脚的内容设置为在整个宽度上均匀分布，如果我理解正确的话，您希望内容在页脚宽度的一部分上均匀分布。如果这是正确的，您可以使用例如“width: 75%”将页脚设置为具有一定百分比的宽度，这会将页脚设置为父元素宽度的 75%，或者您可以设置左边距和右侧使用例如“margin-left: 50px”和“margin-right: 50px”，这意味着页脚内容将比父元素宽 100px，但仍居中。

【讨论】：

感谢@LazyJ 感谢您在justify-content: space-evenly 和padding: 15px 60px 15px 60px 的帮助下回答，现在可以使用了

【解决方案2】：

将您的图像包裹在页脚内的另一个 div 中。将页脚显示设置为 justify-content: center 和 display:flex；对齐项目：居中； justify-content: space-evenly 在包含图像的新 div 上。然后将新 div 的宽度设置为小于 100%，使它们更靠近中心。

希望这可以帮助！

【讨论】：

感谢您在justify-content: space-evenly 和padding: 15px 60px 15px 60px 的帮助下回答，现在可以使用了