html - 为什么不显示: flex property being inherited to child divs?

Question

我正在学习如何使用 flexbox，但无法让我的子 div 继承 display:flex 属性。

我尝试过使用 Chrome 和 Firefox，但在这两种浏览器中都遇到了相同的问题。我可以让 .menu 类继承该属性的唯一方法是在 .menu 类中显式包含“display:inherit”，即使我在父“.menu-container”类中设置了“display:flex”。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu-container {
  color: #fff;
  background-color: #5995DA;  /* Blue */
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}

.menu {
  display: inherit; /* Why do I need this? I shouldn't, right? */
  border: 1px solid #fff;
  width: 900px;
}

    <div class='menu-container'>
      <div class='menu'>
        <div class='date'>Aug 14, 2016</div>
        <div class='signup'>Sign Up</div>
        <div class='login'>Login</div>
      </div>
    </div>

Answer 1

display: flex 仅用于特定类。 child 被单独视为 flex 元素。

Flexbox Explanations如果您有兴趣。