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

Posted 2023-03-06

【中文标题】角。使孩子 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: 1：flex-grow: 1、flex-shrink: 1 和 flex-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;