reactjs - Flex-end 似乎不适用于 flexbox

Question

我正在设置导航，我是 flexbox 的新手。我尝试使用 flex-end 和 flex-start 来设置左右元素（flex-around 似乎对我来说空间太大了）。一切都是对齐的，我似乎不明白我做错了什么。这是我的代码：

<header className="header">
    <div className="leftSide">
    <div className="one">One of left elements</div>
    </div>
    <div className="rightSide">
    <p className="two">One of right elements</p>
    </div>
    </header>

CSS:
.header{
    width: 100%; 
    height: 140px;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.leftSide{
    margin-left: 20px; 
    display: flex;
  justify-content: flex-start; 

}
.rightSide{
    margin-right: 20px; 
    display: flex;
  justify-content: flex-end; 

}

标签： reactjscssflexbox