如何实现Angular组件中两个Div在空间充足时同行显示？

你可以通过CSS Flexbox实现这个需求，既保留原有组件的可选模板逻辑，又能在宽度足够时让两个区块并排显示，空间不足时自动垂直堆叠，完美节省垂直空间。

修改后的组件HTML（仅给Filters区块添加类名，方便样式控制） #

<div class="options-body">
  <div class="filter-section" *ngIf="filterContent?.templateRef">
    <span class="option-title">Filters</span>
    <div class="filter-container">
      <ng-container [ngTemplateOutlet]="filterContent!.templateRef"></ng-container>
    </div>
  </div>

  <div class="actions-container" *ngIf="actionContent?.templateRef">
    <span class="option-title">Actions</span>
    <div>
      <ng-container [ngTemplateOutlet]="actionContent!.templateRef"></ng-container>
    </div>
  </div>
</div>

对应的CSS样式 #

.options-body {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem; /* 控制两个区块的间距，可按需调整 */
}

.filter-section, .actions-container {
  flex: 1 1 280px; /* 核心属性：最小宽度280px，空间充足时自动平分宽度 */
}

.option-title {
  display: block;
  margin-bottom: 0.5rem; /* 标题与下方内容的间距 */
}

/* 可选：针对小屏幕优化间距 */
@media (max-width: 600px) {
  .options-body {
    gap: 1rem;
  }
}

关键逻辑说明 #

1. Flex布局核心：display: flex + flex-wrap: wrap让子元素在空间足够时横向排列，不足时自动换行，完全适配宽窄两种场景。
2. 自适应宽度控制：flex: 1 1 280px意味着每个区块：
   • 可以自动放大填充可用空间（flex-grow: 1）
   • 空间不足时可以缩小（flex-shrink: 1）
   • 最小宽度为280px（flex-basis: 280px），避免内容被挤压变形
3. 保留原有功能：*ngIf的模板显示逻辑完全不受影响，不管是只显示Filters、只显示Actions还是两者都显示，布局都能正常工作。

内容的提问来源于stack exchange，提问作者Musius