Question

当父母是display: flex;时，有没有办法强迫孩子将自己伸展到父母宽度和身高的100％，而无需访问孩子的道具？

我发现align-items: stretch;进行垂直拉伸，但找不到水平的东西

Answer 1

“我发现了对齐项目：拉伸;对于垂直拉伸，但找不到水平的东西”

<强>但是

您可以为子元素指定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 列项也是如此，其中flex-grow: 1会使其填充父级的高度。

我发现align-items: stretch;垂直伸展，但不能找到水平的东西

当涉及到align-items及其默认stretch时，它会影响横轴，并且会为flex 行项目，拉伸它以填充其父级＆＃ 39;高度，对于flex 列项，它是另一种方式，它填充其父的宽度。

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

以下是使用flex-grow: 1

的flex 行示例

＆＃13;

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

＆＃13;

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

＆＃13;

Css3 flex - 在不改变孩子的css规则的情况下将孩子拉伸到100％的宽度和高度

2 个答案: