在 CSS 中嵌套 Flexbox

Question

我正在为一个学校项目创建一个网站，但我希望尝试一下 Flexbox CSS 布局。

但我在将它们与我的标题嵌套时遇到了一点问题，其中包含一个徽标图像和一个导航栏。这是 HTML：

<header id="logo-nav">
  <img src="logo.png" alt="mnml" id="logo">
  <nav id="navigation">
    <ul>
      <li class="nav-button"><a href="#about">About</a></li>
      <li class="nav-button"><a href="#goals">Goals</a></li>
      <li class="nav-button"><a href="#schedules">Schedules</a></li>
      <li class="nav-button"><a href="#form">Contact</a></li>
    </ul>
  </nav>
</header>

我想要完成的是标题的第三部分用于徽标，其余部分用于导航链接。我虽然做到这一点的最好方法是将徽标和导航作为标题框内的框，但我想让导航成为链接的父框，以将它们也视为灵活框。到目前为止我的 CSS：

#logo-nav {
display: flex;
display: -moz-flex;
display: -webkit-flex;
flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
max-width: 100%;
margin: 0 auto;
}

#logo {
flex:4;
-moz-flex:4;
-webkit-flex:4;
}

#navigation {
flex:6;
-moz-flex:6;
-webkit-flex:6;flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
}

#navigation .nav-button {
flex:4;
-moz-flex:4;
-webkit-flex:4

}

但这当然行不通。有什么想法吗？

Answer 1

我假设 “它不起作用” 你的意思是列表项没有弯曲。这是因为flex 简写只适用于弹性项目，它们是弹性容器的子项。由于ul 和它的后代都不是弹性容器的子元素，它们保留它们的正常显示值。它们不参与弹性格式化上下文并且不受flex 的影响。

为了应用flex，您需要将ul 声明为display: flex;

#navigation ul {
    display: flex;
    padding: 0;
}

http://jsfiddle.net/6E6L6/7/