React组件定位

Question

我正在尝试定位react组件，但很难弄清楚CSS的flexbox。

我有3个react组件如下

function App() {
  return (
    <>
    <div className = "header">
      <h1>Connect cruAMS and Security Center</h1>
    </div>
    <br></br>
    <div className="App">
      <Cruams />
      <SecurityCenter />
      <UserContainer />
    </div>
  </>
  );
}

目前它的位置如下所示。

Cruams      SecurityCenter     UserContainer

我想要的是

      Cruams      SecurityCenter

           UserContainer

我如何使用CSS flexbox做到这一点？还是有不同的方法？

提前感谢！

Answer 1

如果你不想让你的css太复杂，一个简单的上边距可以帮助你：

​

.App {
  display: flex;
  justify-content: center;
}
.cruams {
  display: inline-block;
}
.securityCenter{
  display: inline-block;
  margin-top: 20px;
} 
.userContainer {
  display: inline-block;
}

<div className = "header">
  <h1>Connect cruAMS and Security Center</h1>
</div>
<br></br>
<div class="App">
  <div class="cruams">cruams</div>
  <div class="securityCenter">securityCenter</div>
  <div class="userContainer">userContainer</div>
</div>

​

Answer 2

不使用任何额外的div：

<div className="container">
   <Cruams className="half-width" />
   <SecurityCenter className="half-width"/>
   <UserContainer className="full-width" />
</div>

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.half-width {
   flex-basis: 50%
}

.full-width {
   flex-basis: 100%
}