元素以 space 在父宽度上平均分布 - Angular Flexlayout responsive
Elements to spread equally with space over parent width - Angular Flexlayout responsive
我想渲染 3 个 div 方块:div-left, div-middle,和 div-right(每个宽度 300px)分布在父 div main-section[ 的宽度上=45=] 如果屏幕>1300px 应该是 1300px,如果屏幕<1300px 应该缩小。
这3个方块的位置应该是这样的:从0px开始(div左边-左边)到1300px([=33=右边=]div-right) 并且正方形之间的间距相等。
main-section 包含在父 div full-width-section 中屏幕,以便在屏幕>1300px 的情况下不为空;
我的想法是,我不希望 main-section 在屏幕>1300px 时大于 1300px,但在屏幕<1300px 时缩小。通过使用 flex 布局,我希望在屏幕缩小时将 3 个方块平均分开,使其响应迅速。
此外 main-section 应该在 full-width-section 的中心,如果屏幕>1300px 则取 1300px。
此时我设法将 main-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.
如果有任何帮助,我将不胜感激。
如果您从外部包装器中删除 flex 布局指令,那么您应该会得到所需的行为。我修改了你的例子,可以找到here
我想渲染 3 个 div 方块:div-left, div-middle,和 div-right(每个宽度 300px)分布在父 div main-section[ 的宽度上=45=] 如果屏幕>1300px 应该是 1300px,如果屏幕<1300px 应该缩小。
这3个方块的位置应该是这样的:从0px开始(div左边-左边)到1300px([=33=右边=]div-right) 并且正方形之间的间距相等。
main-section 包含在父 div full-width-section 中屏幕,以便在屏幕>1300px 的情况下不为空;
我的想法是,我不希望 main-section 在屏幕>1300px 时大于 1300px,但在屏幕<1300px 时缩小。通过使用 flex 布局,我希望在屏幕缩小时将 3 个方块平均分开,使其响应迅速。
此外 main-section 应该在 full-width-section 的中心,如果屏幕>1300px 则取 1300px。
此时我设法将 main-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. 如果有任何帮助,我将不胜感激。
如果您从外部包装器中删除 flex 布局指令,那么您应该会得到所需的行为。我修改了你的例子,可以找到here