html - 在 CSS 中嵌套 Flexbox

Question

我正在为一个学校元素创建一个网站，我想尝试一下 Flexbox CSS 布局会很不错。

但是我在将它们与包含 Logo 图像和导航栏的页眉嵌套时遇到了一点问题。这是 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>

我想要完成的是将标题的第三部分用于 Logo ，其余部分用于导航链接。我虽然最好的方法是将 Logo 和导航作为标题框中的框，但我想将导航作为链接的父框，以将它们也视为灵活的框。到目前为止我的 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 简写仅适用于 flex 元素，它们是 flex 容器的子项。由于 ul 及其后代都不是 flex 容器的子代， 它们保留其正常显示值。 它们不参与 flex 格式化上下文且不受影响通过 flex。

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

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

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