Html 当没有足够的空间时，如何将组div移动到新行？

我有HTML块：

 <div class="block_wrapper">
        <div class="block">
         Show by
          <div class="badges">
              <app-badge _ngcontent-xbm-c7="" _nghost-xbm-c15="" ng-reflect-badge="[object Object]" ng-reflect-css-class="primary" ng-reflect-is-selected="false"><span _ngcontent-xbm-c15="" class="badge p-2 mb-1 mr-2 badge-unchecked" ng-reflect-klass="badge p-2 mb-1 mr-2" ng-reflect-ng-class="badge-unchecked">10</span></app-badge>
              <app-badge _ngcontent-xbm-c7="" _nghost-xbm-c15="" ng-reflect-badge="[object Object]" ng-reflect-css-class="primary" ng-reflect-is-selected="false"><span _ngcontent-xbm-c15="" class="badge p-2 mb-1 mr-2 badge-unchecked" ng-reflect-klass="badge p-2 mb-1 mr-2" ng-reflect-ng-class="badge-unchecked">10</span></app-badge>
              <app-badge _ngcontent-xbm-c7="" _nghost-xbm-c15="" ng-reflect-badge="[object Object]" ng-reflect-css-class="primary" ng-reflect-is-selected="false"><span _ngcontent-xbm-c15="" class="badge p-2 mb-1 mr-2 badge-unchecked" ng-reflect-klass="badge p-2 mb-1 mr-2" ng-reflect-ng-class="badge-unchecked">10</span></app-badge>
          </div>
        </div>
    </div>

---

在block类中，尝试添加此css

.block {
    display: flex;
    flex-flow: row wrap;
}

---

通常，它将在同一行中对齐，但如果没有足够的空间，它将移动到换行符

请编辑您的问题，以包含相关CSS和HTML。请显示您的CSSDone，再次查看问题中的CSS以显示您的实际HTML，或更具代表性的内容，而不是…flex direction:列；

.block {
    display: flex;
    flex-flow: row wrap;
}