我要渲染3个div正方形： div-left ， div-middle 和 div-right （每个宽度为300px）扩展到父div 主要部分的宽度，如果screen> 1300px，则应为1300px；如果screen <1300px，则应缩小。
3个正方形的位置应如下：从0px（ div-left 的左侧）开始，直到1300px（ div-right 的右侧），然后正方形之间的间距相等。
主要部分包含在父div 全宽部分中，该部分占据了屏幕的整个宽度，因此在屏幕为空的情况下它不会为空> 1300px;
我的想法是，当屏幕> 1300px时，我不希望 main-section 大于1300px，而如果屏幕<1300px，则不缩小。通过使用flex布局，我希望在屏幕缩小时将3个正方形等分，以使其响应。
主要部分也应位于全角部分的中心，如果屏幕> 1300px，则应采用1300px。
此刻，我设法将 main-section 放置在中央，但是如果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. 我将不胜感激。