Css3 flex - 在不改变孩子的css规则的情况下将孩子伸展到100％的宽度和高度 [英] Css3 flex - stretch child to 100% width and height without changing the child's css rules

问题描述

当父母是 display：flex; 时，是否有办法强制孩子将自己伸展到父母的宽度和高度的100％，而不访问孩子的道具？

我发现 align-items：stretch; 用于垂直拉伸，但找不到水平

解决方案

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

我猜你正在寻找 justify-content 属性，但它没有 stretch 规则，它只能接受以下规则： justify-content：flex-start | flex-end |中心|空间之间|空间|周围|空间均匀;

但

您可以为子元素指定 flex-grow：1 ，它将填充父元素的所有可用空间。

是例子（例如，我已经添加了对父元素的填充，所以你可以看到父母和孩子之间的区别）：

  .wrapper {display：flex;宽度：80％; height：300px; background-color：orangered; padding：8px;}。item {flex-grow：1; background-color：forestgreen;}  

< div class = 包装 > < div class =item>< / div>< div>

when parent is display: flex;, is there a way to force it's children to stretch itself to 100% of the parent's width and height, without accessing the children's props?

i've found align-items: stretch; for vertical stretching, but can't find something for the horizontal

解决方案

"I've found align-items: stretch; for vertical stretching, but can't find something for the horizontal"

I guess you're searching for justify-content property, but it doesn't have stretch rule, it only can accept the following rules: justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

But

You can specify flex-grow: 1 for child element and it will fill all available space of the parent.

Here is the example (I have added paddings to parent element just for example, so you can see the difference between parent and child):

.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>

这篇关于Css3 flex - 在不改变孩子的css规则的情况下将孩子伸展到100％的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！