css - 在不改变 child 规则的情况下将 child 拉伸(stretch)到 100% 的宽度和高度

Question

当 parent 是 display: flex; ，有没有办法强制它的 child 将自己拉伸(stretch)到 parent 的宽度和高度的 100%，而不访问 child 的 Prop ？

我找到了align-items: stretch;垂直拉伸(stretch)，但找不到水平的东西。

Answer 1

“我找到了 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>