flexbox - 列包含 div 行不起作用

Question

目的：带有背景图像（封面）的 flexbox 页面，当屏幕缩小时，它的高度可能会增加，从而强制元素换行；但它的顶部有标题栏。

我将整个屏幕设置为带有背景图像的列。 列中的第一个元素：模拟标题栏。 第二个元素应该是一个 div - flex-direction: row，但里面的彩色 div 仍然表现得像在列中一样。

    html, body { box-sizing: border-box; height: 100%; width: 100%;
  margin: 0; padding: 0; border: 0; cursor: default }

.workspace {
  background: url("../../../assets/Images/WhatIsHunter2.jpg") no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;

  h1 {
    color: #E0B228;
  }

  h2 {
    color: #2856E0;
  }
}

HTML：

<div class='workspace' [ngStyle]="{'display': 'flexbox', 'flex-direction': 'column'}">
  <div [ngStyle]="{'width': '100vw', 'height': '60px', 'background-color': 'beige'}">
    This is its own row at the top of the column - a header bar
  </div>
  <div [ngStyle]="{'margin-top': '20px', 'display': 'flexbox', 'flex-direction': 'row', 'justify-content': 'space-evenly'}">
    <div [ngStyle]="{'width': '100px', 'height': '100px', 'background-color': 'red'}">
    </div>
    <div [ngStyle]="{'width': '100px', 'height': '100px', 'background-color': 'green'}">
    </div>
    <div [ngStyle]="{'width': '100px', 'height': '100px', 'background-color': 'blue'}">
    </div>
  </div>
</div>

Answer 1

把display: flexbox;改成display: flex;就可以了