html - 元素在父宽度上与空间平均分布 - Angular Flexlayout 响应

标签 html css angular flexbox angular-flex-layout

我想渲染 3 个 div 方 block :div-leftdiv-middlediv-right(每个宽度为 300px)分布在父 div ma​​in-section 的宽度上,如果屏幕 >1300px 则应为 1300px,如果屏幕<1300px 则缩小。

3 个方 block 的位置应如下:从 0px(div-left 的左侧)开始到 1300px(div-right 的右侧)和正方形之间的间距相等。

ma​​in-section 包含在父 div full-width-section 中,它占据了屏幕的整个宽度,因此在屏幕的情况下它不是空的> 1300px;

我的想法是,当屏幕>1300px 时,我不希望ma​​in-section 大于1​​300px,但如果屏幕<1300px,则缩小。通过使用 flex 布局,我希望在屏幕缩小时将 3 个方 block 平均分开,使其具有响应性。

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

此时我设法将 ma​​in-section 放在中心,但如果屏幕>1300px,则不占用 1300px,它只占用正方形宽度的总和。

HTML(为便于查看而着色的 divs):

<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/

相关文章:

javascript - 填充最后一个输入时 JQuery ajax 调用失败

javascript - 当图像尺寸大于最小标准时拖动图像

html - 是否有用于 html/css 验证的 IE 插件?

angular - 适用于 Ionic 2/3 移动浏览器的 AOT(提前编译)

javascript - Angular 2单击事件中的动态函数名称

气球中的 html css 图标

php - htaccess 将 .htm 和 .php 页面重定向到无扩展名

Jquery 打开和关闭按钮单击

html - 滑入式菜单 : witdth and position:fixed

VS Code 中的 Angular 调试 - 断点未绑定(bind)