Html flexbox-列包含无法工作的div行

用途：具有背景图像（封面）的flexbox页面，当屏幕收缩迫使元素包裹时，该页面的高度可能会增加；但它的顶部有标题栏

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

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>

这是它自己在列顶部的行-标题栏

更改

显示：flexbox到
显示：flex
和它将起作用
你是说在你的父母的ng风格声明中
'display'：'flex'
而不是
'display'：'flexbox'
！我早该抓到的。正是这种尴尬保证了我永远不会忘记这一点。非常感谢你的帮助。瑜伽士。
<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>