角。使孩子 100% 宽度的 flex 父母

Posted

技术标签:

【中文标题】角。使孩子 100% 宽度的 flex 父母【英文标题】:Angular. Make child 100% width of flex parent 【发布时间】:2019-09-16 14:44:24 【问题描述】:

我有一个 Angular 组件,它有一个主 flex div main-container 和一个子 box。我希望孩子位于父母的中心,并且拥有父母宽度的 100%。下面代码的 sn-p 显示我的代码正在运行,但在 Angular 中,box 的宽度为 80px(由填充构成)。

.main-container 
    width: 100%;
    min-height: 100vh;
    padding: 15px;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
    display: flex;
    justify-content: center;
    align-items: center;

.box 
    max-width: 500px;
    width: 100%;
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
<div class="main-container">
  <div class="box">
  </div>
</div>

这是我的 Angular 页面的照片:

非常感谢!

【问题讨论】:

您是否在删除max-width 属性后尝试过。此外,如果您可以与您的问题分享 Stackblitz 会更好。 我在删除 max-width 属性后尝试过,但没有任何改变。我现在正在创建一个 Stackblitz 页面。 Stackblitz 工作正常...我想我的项目有问题。我马上检查 我会做 margin: auto;宽度:100%;而不是 align-item 和 justify-content 新项目现在似乎运行良好。谢谢你的一切! 【参考方案1】:

在主容器中将width: 100% 切换为max-width: 100vw,并在盒子容器中使用flex: 1

max-width 将阻止任何水平滚动条,保持容器始终可见。 flex: 1flex-grow: 1flex-shrink: 1flex-basis: 0px 的快捷方式将强制该框填充容器内的所有剩余空间。
.main-container 
    max-width: 100vw; // <= try this
    min-height: 100vh;
    padding: 15px;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
    display: flex;
    justify-content: center;
    align-items: center;

.box 
    flex: 1;  <= And this
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    text-align: center;

【讨论】:

以上是关于角。使孩子 100% 宽度的 flex 父母的主要内容,如果未能解决你的问题,请参考以下文章

使用 flex 让一个高个子的孩子适应一个矮个子的父母

如何仅使用 CSS 使孩子自动适应父母的宽度?

让孩子处于父母的 100% 高度且溢出:自动

当孩子依赖父母,父母依赖孩子时,浏览器如何计算宽度

最大高度的孩子:100% 溢出父母

防止孩子增加父母的宽度[重复]