Css React JS中水平构件的弹性间距

我有一个有三个元素的页脚，我想水平分布它们。我尝试使用

flex

和

之间的空格将它们水平隔开。以下是我的react组件：

import React from "react";

export default function Footer()
{
    const Element1 = "GZB Automation";
    const today = new Date();
    const DayFormat = today.toString().split(" ").slice(0,4);
    const Element3 = DayFormat.filter(Boolean).join(" ");
    console.log(Element3);
    const Element2 = "Copyright © "+today.getFullYear().toString()+". All rights reserved.";
    return(
        <div className="FooterAligner">
        <div className="FooterElement">{Element1}</div>
        <div className="FooterElement">{Element2}</div>
        <div className="FooterElement">{Element3}</div>
        </div>
    );
}

以下是它们的外观：


这就是我希望他们出现的方式：


另外，忽略字体样式、文本部分和轻微的背景变化，我只想知道间距

主页脚本（app.js）：

从“React”导入React；
从“./components/screens/StarterScreen.jsx”导入StarterScreen；
从“./components/screens/LoginScreen.jsx”导入LoginScreen；
从“./components/screens/RegisterScreen.jsx”导入RegisterScreen；
从“./components/screens/DisplayScreen.jsx”导入DisplayScreen；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“./components/junk/Footer.jsx”导入页脚；
//从“/components/coreComponents/LineChart.js”导入线形图；
从“/components/security/PrivateRoute.jsx”导入受保护的路由；
导入“/App.css”；
从“react router dom”导入{BrowserRouter，Route，Switch}；
函数App（）{
返回(
);
}
导出默认应用程序；

对于复制：
既然您在项目中使用引导，为什么不利用它附带的功能呢

在这个特定的示例中，我将
d-flex
类添加到页脚容器中。这会将其转换为flex容器，因此您可以在

之间添加

调整内容，从而在元素之间分配可用空间：


函数页脚（）{
const element1=“GZB自动化”；
const today=新日期（）；
const dayFormat=today.toString（）.split（“”）.slice（0,4）；
const element3=dayFormat.filter（布尔值）.join（“”）；
const element2=`版权©今日${
.getFullYear（）
.toString（）}。保留所有权利。`；
返回(
{element1}
{element2}
{element3}
);
}
类应用程序扩展了React.Component{
render（）{
返回(
应用程序的其余部分在这里。。
);
}
}
render（，document.getElementById（“根”））
既然您在项目中使用引导，为什么不利用它附带的功能呢

在这个特定的示例中，我将
d-flex
类添加到页脚容器中。这会将其转换为flex容器，因此您可以在
之间添加
调整内容，从而在元素之间分配可用空间：


函数页脚（）{
const element1=“GZB自动化”；
const today=新日期（）；
const dayFormat=today.toString（）.split（“”）.slice（0,4）；
const element3=dayFormat.filter（布尔值）.join（“”）；
const element2=`版权©今日${
.getFullYear（）
.toString（）}。保留所有权利。`；
返回(
{element1}
{element2}
{element3}
);
}
类应用程序扩展了React.Component{
render（）{
返回(
应用程序的其余部分在这里。。
);
}
}
render（，document.getElementById（“根”））

你能用这个复制演示吗？出于复制目的：您需要添加：
.FooterAligner{width:100%；}
-Wow@m4n0您是魔术师谢谢！你能用这个复制演示吗？出于复制目的：您需要添加：
.FooterAligner{width:100%；}
-Wow@m4n0您是魔术师谢谢！
.FooterAligner
{
  display: flex;
  justify-content: space-between;
  bottom: 2%;
  position:fixed;
}
.FooterElement
{
  width: calc(100%/3);
}

import React from 'react';
import StarterScreen from './components/screens/StarterScreen.jsx';
import LoginScreen from './components/screens/LoginScreen.jsx';
import RegisterScreen from './components/screens/RegisterScreen.jsx';
import DisplayScreen from './components/screens/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import Footer from './components/junk/Footer.jsx';
//import LineChart from './components/coreComponents/LineChart.js';
import ProtectedRoute from './components/security/PrivateRoute.jsx';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
  function App(){
    return (
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={StarterScreen} exact path="/"></Route>
    <Route component={RegisterScreen} exact path="/register"></Route>
    <Route component={LoginScreen} exact path="/login"></Route>
    <ProtectedRoute component={DisplayScreen} exact path="/login-props-test" />
    </Switch>
    </BrowserRouter>
    <Footer />
    </div>
  );
    }

export default App;