Я хочу сделать 3 квадрата деления: div-left , div-middle и div-right (каждый шириной 300 пикселей) для распространенияпо ширине родительского div main-section , который должен быть 1300px, если screen> 1300px, и уменьшаться, если screen <1300px.</p>
3 квадрата должны быть расположены следующим образом: начиная с 0px (левая сторона div-left ) до 1300px (правая сторона div-right )и с равными пробелами между квадратами.
main-section заключен в родительский div full-width-section , который занимает всю ширину экрана, так чтоон не пустой в случае, если экран> 1300px;
Идея состоит в том, что я не хочу, чтобы main-section был больше 1300px, когда экран> 1300px, но уменьшался, еслиэкран <1300px.Используя гибкий макет, я хотел, чтобы при уменьшении экрана 3 квадрата были разделены поровну. </p>
Также основной раздел должен находиться в центре на всю ширину-section и взять 1300px, если экран> 1300px.
На данный момент мне удалось расположить main-section в центре, но не берет 1300px, если screen> 1300px, толькопринимает сумму квадратов ширины.
HTML (цветные элементы для облегчения просмотра):
<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;
}
ссылка на демонстрацию. Буду признателен за любую помощь.