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

子元素应该保持在他们自己之间。目前，元素是垂直居中的，但它们彼此相邻。这样做是否有一个奇特的解决方案或一些解决方法？请注意，flex-direction设置为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就是您所需要的，并将align-items替换为justify-content，因为方向会发生变化。

编辑你这样的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;
  }
}

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Flexbox排在一起

2 个答案: