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简写仅适用于Flex项目，它是Flex容器的子项。由于ul及其后代都不是flex容器的子项，~~它们保留了正常的显示值。~~它们不参与flex格式化上下文，不受{{{ 1}}。

为了应用flex，您需要声明flex为ul

display: flex;

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

将Flexbox嵌套在CSS中

1 个答案: