当 parent 是 display: flex;
,有没有办法强制它的 child 将自己拉伸(stretch)到 parent 的宽度和高度的 100%,而不访问 child 的 Prop ?
我找到了align-items: stretch;
垂直拉伸(stretch),但找不到水平的东西。
最佳答案
“我找到了 align-items:stretch; 用于垂直拉伸(stretch),但找不到用于水平方向的东西”
我猜你正在搜索 justify-content
属性,但它没有 stretch
规则,它只能接受以下规则:justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
但是
您可以指定flex-grow: 1
对于子元素,它将填充父元素的所有可用空间。
这是示例(例如,我在父元素中添加了填充,因此您可以看到父元素和子元素之间的区别):
.wrapper {
display: flex;
width: 80%;
height: 300px;
background-color: orangered;
padding: 8px;
}
.item {
flex-grow: 1;
background-color: forestgreen;
}
<div class="wrapper">
<div class="item"></div>
<div>
关于css - 在不改变 child 规则的情况下将 child 拉伸(stretch)到 100% 的宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47122888/