将子项拉伸至 100% 宽度和高度而不更改子项规则

Question

当父级为 时display: flex;，有没有办法强制其子级将自身拉伸到父级宽度和高度的 100%，而不访问子级的 props？

我找到了align-items: stretch;垂直拉伸的方法，但找不到水平拉伸的方法。

Answer 1

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

Answer 2

有没有办法强制其子级将自身拉伸到父级宽度和高度的 100%，而不访问子级的道具？

不，对于 ie flex行项目（默认），其默认宽度为auto，这使其取决于其内容/大小，并且要使其水平拉伸（填充剩余空间），它需要flex-grow: 1。

对于弹性列项目也是如此，这flex-grow: 1将使其填充父项的高度。

我找到了align-items: stretch;垂直拉伸，但找不到水平拉伸

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

主轴没有具有相同功能的属性，因为这就是该flex属性的用途，此处为简写flex: <flex-grow> <flex-shrink> <flex-basis>，并且由于人们可能希望不同的项目有不同的行为，因此它在 Flex 项目（您称之为子项目）上设置）

这是使用的弹性行示例flex-grow: 1

.parent {
  display: flex;
  height: 200px;
  background: red;
}

.child {
  flex-grow: 1;
  background: blue
}

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