角。使孩子 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: 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;
【讨论】:
以上是关于角。使孩子 100% 宽度的 flex 父母的主要内容,如果未能解决你的问题,请参考以下文章