项目显示在当前项目下方而不是旁边答案

【问题标题】：Item appears below the current item instead of next to it项目显示在当前项目下方而不是旁边
【发布时间】：2021-11-08 04:05:20
【问题描述】：

我有 2 个组件：

当我得到它如下：

Sidebar.js：

import { useHistory } from 'react-router-dom';

function Sidebar(){
    let history = useHistory();

    let SidebarClick = () =>{
        history.push("/some/link");
    };
    
    
    return(
         <div className="main_div">
            <div className="children_wrapper">
                <div className="div_item">
                    abc
                </div>
            </div>
        </div>
    );
}

export default Sidebar;

在 Sidebar.scss 中：

.main_div{
  width: 25%;
  position: sticky;
  float: left;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}


.main_div .children_wrapper{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}


.children_wrapper .div_item{
  width: 100%;
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

在 App.js 中：

当我在 main_app div 中像这样调用组件（侧边栏）时，它会根据需要显示在侧边栏位于主要内容旁边的位置：

<div className="app">
  
  <div className="main_app">
      <Sidebar /> 
  </div>
  
  
  
  
  
In **App.scss**:  
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


.app{
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}

.main_app{
  width: 100%;
  height: 100%;
  display: flex;
}

看起来如愿。所需图像：

但是，当我将它放在 Route 渲染道具中时，如下所示：

function App() {
  return (
      <Router>
          <div className="app">
              
              <div className="actual_app">
                  <SideBar/>
                 
              </div>

              <Switch>
                  <Route path="/some/link" render={() => <Sidebar/>} />
              </Switch>

          </div>
      </Router>

  );
}

它显示在当前页面下方而不是侧边栏旁边。

【问题讨论】：

我似乎无法复制您的问题，但您也有一些不一致之处。例如，我正在查看您的样式以确保您的具有侧边栏和内容的 div 是 flex，并且我看到您将 .main_app 设置为 flex 但我没有看到该类在任何地方使用在使用路由器更新的App 组件中。

标签： css reactjs sass react-hooks react-router

【解决方案1】：

将两个组件保持在同一行的属性是 display: flex; 附加到您的 main_app 并且该类名不再存在的行。看起来您将名称更改为 actual_app 但您添加的新组件不在 actual_app div 中，因此未应用弹性显示。

当您向元素添加 flex 显示属性时，它适用于该元素中包含的所有组件，但不适用于元素自身的定位（与显示属性“block”和“display-block”不同）。

您可以将 flex display 添加到 app div，或者将新组件移动到 actual_app div 中。

【讨论】：