html - 元素在父宽度上均匀分布，并具有空间-Angular Flexlayout响应

我想渲染3个div正方形：div-left，div-middle和div-right（每个宽度300px）分布在父div主部分的宽度上，如果screen> 1300px，则应为1300px并缩小如果屏幕
3个正方形的位置应如下：从0px（div-left的左侧）开始直到1300px（div-right的右侧），并且正方形之间的距离相等。

main-section包含在父div full-width-section中，该部分采用屏幕的整个宽度，以便在屏幕> 1300px的情况下不为空；

我的想法是，当屏幕> 1300px时，我不希望main-section大于1300px，但是如果屏幕
同样，主屏幕部分应位于全宽部分的中央，如果屏幕> 1300px，则主屏幕部分应为1300px。

此时，我设法将主要部分放置在中央，但是如果screen> 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.
我将不胜感激任何帮助。

最佳答案

如果从外部包装中删除flex布局指令，则应该获得所需的行为。我已经修改了您的示例，可以找到here

关于html - 元素在父宽度上均匀分布，并具有空间-Angular Flexlayout响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54754053/