"display:flex;"不起作用。(CSS， JavaScript， React ，React Router V6)

Question

我一直在使用"display: flex;"要定位"创建"部分到旁边的菜单栏(主页，个人资料等)，但它似乎&;display: flex;&;不工作，而是垂直定位。我一直认为这是因为我以错误的方式使用div或因为react路由器V6。谁能帮我定位一下它的水平位置?谢谢你。

我的代码和结果图像如下:

App.js

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LoginHeader from "./LoginHeader.js";
import { Outlet } from "react-router";
import Login from "./Login.js";
import RegisterHeader from "./RegisterHeader.js";
import Register from "./Register.js";
import HomeHeader from "./HomeHeader.js";
import Sidebar from "./Sidebar.js";
import Post from "./Post.js";
import News from "./News.js";
function App() {
return (
<Router>
<div className="App">
<Routes>
<Route path = "/" element = {<LoginHeader />} />
</Routes>
<Routes>
<Route path = "/" element = {<Login />} />
</Routes>
<Routes>
<Route path = "/register" element = {<RegisterHeader />} />
</Routes>
<Routes>
<Route path = "/register" element = {<Register />} />
</Routes>
<Routes>
<Route path = "/home" element = {<HomeHeader />} />
</Routes>
<Routes>
<Route path = "/home" element = {<div className = "appBody"> <Sidebar /> </div>} />
</Routes>
<Routes>
<Route path = "/home" 
element = {<div className = "homePosts"> <Post /> </div>} />
</Routes>
<Routes>
<Route path = "/home" element = {<News />} />
</Routes>
</div>
</Router>

);
}
export default App;

App.css

.appBody {
display: flex;
}
.homePosts {
display: flex;
justify-content: center;
}

结果图像

Answer 1

在App.js或根文件index.js中导入App.css文件

像这样，如果css文件在同一个文件夹

import './App.css';

Answer 2

这是错误放置div和flex属性的原因，像这样更新你的代码，它将工作。

<div className="App">
<Routes>
<Route path="/" element={<h1>Login Header</h1>} />
</Routes>
<Routes>
<Route path="/" element={<h2>Login</h2>} />
</Routes>
<Routes>
<Route path="/register" element={<h3>Register Header</h3>} />
</Routes>
<Routes>
<Route path="/register" element={<h4>Register</h4>} />
</Routes>
<Routes>
<Route path="/home" element={<h5>HomeHeader</h5>} />
</Routes>
<div className="container">
<Routes>
<Route path="/home" element={<h6>Sidebar</h6>} />
</Routes>
<div className="appBody">
<Routes>
<Route
path="/home"
element={
<div className="homePosts">
<p>Post</p>
</div>
}
/>
</Routes>
<Routes>
<Route path="/home" element={<i>News</i>} />
</Routes>
</div>
</div>
</div>
</Router>

.container {
display: flex;
}
.appBody {
display: flex;
flex: 1;
}
.homePosts {
display: flex;
justify-content: center;
flex: 1;
}