在不改变孩子规则的情况下将孩子拉伸到 100% 的宽度和高度

Question

当父对象是display: flex;时，是否有一种方法可以强制其子对象将自己拉伸到父对象宽度和高度的100%，而无需访问子对象的道具？

我已经找到了用于垂直拉伸的align-items: stretch;，但找不到用于水平拉伸的东西。

Answer 1

"我找到了对齐项目：拉伸；垂直拉伸，但找不到水平的东西">

我猜你在搜索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>

Answer 2

有没有一种方法可以强制它的子级将自己扩展到父母的宽度和高度，而不使用孩子的道具？

否，对于flex行项目(默认值)，其默认宽度为auto，这使其取决于其内容的大小，而要使其水平拉伸(填充剩余空间)，则需要flex-grow: 1。

flex列项也是如此，其中flex-grow: 1将使其填充父项的高度。

---

我已经找到了用于垂直拉伸的align-items: stretch;，但不能为水平找点东西

当涉及到align-items及其默认stretch时，它会影响横轴，并且将对flex行项目进行拉伸以填充其父项的高度，而对flex列项则相反，填充父项的宽度。

主轴没有相同的属性，因为这就是flex属性的含义，这里简称为flex: <flex-grow> <flex-shrink> <flex-basis>，由于可能需要不同项目的不同行为，因此它设置在灵活项目(您称之为子)上

---

这是一个使用flex-grow: 1的灵活行样本

.parent {
display: flex;
height: 200px;
background: red;
}
.child {
flex-grow: 1;
background: blue
}

<div class='parent'>
<div class='child'></div>
</div>