Flexbox的排

Question

我使用CSS Flexbox將創建一個垂直居中導航：

#main-nav { 
    display: flex; 
    height: 400px; 
    width: 50%; 
    background: #ccc; 
    align-items: center; 
    padding: 50px; 
    ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    } 
} 

子元素應該保持彼此之間。目前，這些元素是垂直居中的，但他們保持相鄰。有沒有一個奇特的解決方案或一些解決方法來做到這一點？請注意，彈性方向設置爲row。

結果應該是這樣的：

RESULT

檢查出來：

#main-nav { 
 
    display: flex; 
 
    height: 400px; 
 
    width: 50%; 
 
    background: #ccc; 
 
    align-items: center; 
 
    padding: 50px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<nav id="main-nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Products</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    <div class="contact-info"> 
 
    Lorem Ipsum 
 
    </div> 
 
</nav>

https://jsfiddle.net/4d58xrz8/

Answer 1

添加flex-direction:column;您#main-nav

#main-nav { 
 
    display: flex; 
 
    height: 400px; 
 
    width: 50%; 
 
    background: #ccc; 
 
    flex-direction:column; 
 
    align-items: left; 
 
    padding: 50px; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<nav id="main-nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Products</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    <div class="contact-info"> 
 
    Lorem Ipsum 
 
    </div> 
 
</nav>

Answer 2

如果我理解過程rstood，flex-direction是你所需要的，並且用justify-content替換align-items，因爲方向改變了。

編輯你的CSS這樣獲得你的結果：

#main-nav { 
    display: flex; 
    height: 400px; 
    width: 50%; 
    background: #ccc; 
    justify-content: center; 
    flex-direction:column; 
    padding: 50px; 
    ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    } 
}