元素在父宽度上与空间均匀分布 - Angular Flex Layout responsive

Question

我要渲染 3 个 div 方块：div-left、div-middle 和 div-right（每个宽度为 300px）分布在父 div ma​​in-section 的宽度上，如果 screen>1300px 应该是 1300px，如果 screen

这 3 个方格的位置应如下：从 0px（div-left 左侧）到 1300px（div-right 右侧）和正方形之间的间距相等。

ma​​in-section 包含在父 div full-width-section 中，它占据屏幕的整个宽度，以便在屏幕显示时不为空> 1300像素;

这个想法是我不希望 ma​​in-section 在屏幕>1300px 时大于 1300px，但如果屏幕

此外，ma​​in-section 应位于 full-width-section 的中心，如果屏幕>1300px，则为 1300px。

此时我设法将 ma​​in-section 定位在中心，但如果屏幕>1300px，则不需要 1300px，它只需要正方形宽度的总和。

HTML（为便于查看而着色的 div）：

<div class="full-width-section" fxLayout fxLayoutAlign="space-evenly stretch">
  <div class="main-section" fxLayout fxLayoutAlign="space-between center">
    <div class="div-left" style="background: #df1313;width: 300px; height: 300px;"></div>
    <div class="div-middle" style="background: #4826df;width: 300px; height: 300px;"></div>
    <div class="div-right" style="background: #25ca57;width: 300px; height: 300px;"></div>
  </div>
</div>

CSS：

.full-width-section {
    width: 100%;
    background: #4bd0f1;
}

.main-section {
    max-width: 1300px;
    background: #e2d959;
}

link to demo. 我将不胜感激。

Answer 1

如果您从外部包装器中删除 flex 布局指令，那么您应该会获得所需的行为。我修改了你的例子，可以找到here