如果没有足够的空间，如何将组div移到新行？

Question

我有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>

现在看起来像：

如果没有空间，它将变为：

如果没有可用空间，如何将<div class="badges">移至新行？

这是关于flex块的问题，它们是内联的，但是当空间不足时，它们应该一一对应。

CSS是：

.block_wrapper {
   display: flex;
}

.block {
  padding-right: 10px;
}

Answer 1

在您的块类中，尝试添加此CSS

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

通常它将在同一行中对齐，但是如果空间不足，它将移至换行符