我第一次在一個專案中使用 flexbox，但遇到了問題。所以我正在使用反應。我有一個家庭組件，它是一個網格，它是一個導航欄組件，它設定在網格的頂部，占據了整個螢屏和大約 7vh 的高度。
導航欄顯示設定為 flexbox。導航欄在 react 組件中有一些邏輯，但由于我主要將其發布到與 react 無關的標簽，所以我只會發布我的組件最終呈現的 HTML：
<div id="Navbar">
<h1 id="title">Kepos</h1>
<div>
<h2 id="home">Home</h2>
<a href="browse"><h2 id="browse">Browse</h2></a>
<a href="search"><h2 id="search">Search</h2></a>
<a href="join-us"><h2 id="joinUs">Join us</h2></a>
</div>
</div>
這是CSS：
#Navbar {
border: solid white 1px;
color: white;
display: flex;
justify-content: space-between;
flex-direction: row;
}
現在我的問題是標題 ( & ) 元素不會按照我希望的方式對齊。我希望他們水平地坐在一起（我認為 flex-direction: row; 會這樣做），但他們坐在不同行的同一列中。這是截圖：https : //imgur.com/a/BeMMxyr
那么有人可以告訴我我做錯了什么以及我如何讓它們按照我希望的方式對齊嗎？
在此先感謝您的幫助
uj5u.com熱心網友回復：
從我所見，display: flex實際上是在#Navbar元素上定義的，因此該行僅適用于該元素。
但是在您的#Navbar元素中，還有另一個元素，這也是div您想要添加的地方display: flex。
供參考：該flex-direction是row在默認情況下，所以沒有必要添加。
#Navbar, #Navbar div {
display: flex;
justify-content: space-between;
align-items: center;
}
#Navbar{
background-color: beige;
}
#Navbar div > * {
margin-left: 1em;
}<div id="Navbar">
<h1 id="title">Kepos</h1>
<div>
<h2 id="home">Home</h2>
<a href="browse"><h2 id="browse">Browse</h2></a>
<a href="search"><h2 id="search">Search</h2></a>
<a href="join-us"><h2 id="joinUs">Join us</h2></a>
</div>
</div>uj5u.com熱心網友回復：
嘗試
#Navbar {
border: solid white 1px;
color: white;
display: flex;
justify-content: space-between;
flex-direction: columb;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398086.html