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; 
    } 
}