设置子元素的宽度以填充父元素答案

【问题标题】：Set the width of children to fill the parent设置子元素的宽度以填充父元素
【发布时间】：2018-01-04 06:24:12
【问题描述】：

我希望div 的子代填充其宽度。

现在正在使用这样的代码：

.parent {
  width: 100%;
  display: inline-block;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-block;
  margin-left: 1%;
  width: 31.4%;
  height: 100px;
  background: #ddd;
}

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

它适用于 3 boxes，但我想要的是 - 即使盒子数是 one 或 two 我希望它们填充父宽度。我只想使用 CSS 来实现这一点。

【问题讨论】：

标签： css flexbox parent-child

【解决方案1】：

您可以使用flexbox 属性实现此目的。

这是一个演示：

.parent {
  display: flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  height: 100px;
  background: #ddd;
  flex: 1;
  margin: 0 10px;
}

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

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

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

【讨论】：

@JithinRajPR 是的，孩子会长大填满容器
inline-flex 和 flex 之间有什么区别，哪个更适合我的情况。？
那些将使用这个答案的人请注意 - The values "flex" and "inline-flex" requires a prefix to work in Safari. For "flex" use "display: -webkit-flex", for "inline-flex" use "display: -webkit-inline-flex;" 干杯。 :)

【解决方案2】：

您可以将父级设为flexbox 并定义子级在有可用空间时成长。我删除了.child 的宽度。

.parent {
  width: 100%;
  display: inline-flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-block;
  margin-left: 1%;
  height: 100px;
  background: #ddd;
  flex-grow: 1;
}

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

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

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

【讨论】：

如果孩子没有身高，这会起作用吗？inline-flex和flex有什么区别？
是的，它可以在没有高度的情况下工作（对于孩子）。 inline-flex 和 flex 的区别在于后者是块元素。我选择 inline-flex 是因为您将父级定义为 inline-block。

【解决方案3】：

使用弹性框：

.parent {
  width: 100%;
  display: flex;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.child {
  flex: 1;
  margin: 0 10px;
  height: 100px;
  background: #ddd;
}

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

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

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

【讨论】：

【解决方案4】：

您使用的宽度为 30%，对于每个元素都是固定的，因此每次创建其他元素时它的大小是固定的并添加到驻留元素的末尾，并且在总宽度大于父容器的宽度后溢出。

改为使用 flex-box。

.parent {
  width: 100%;
  display:flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  flex:1;
  margin-left: 1%;
  width: 31.4%;
  height: 100px;
  background: #ddd;
}

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

</div>

【讨论】：

【解决方案5】：

您可以使用 flexbox 来实现这一点。

下面的演示展示了它如何与更多的子节点以及零高度的节点一起工作。

我还更改了子项的边距属性，以便与 flexbox 一起正常工作。

.parent {
  width: 100%;
  display: inline-flex; /*used inline-flex here, to mirrior your inline-block setting, but you can use flex*/
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-flex;
  flex-grow: 1;
  margin: 0 1%;
  height: 100px;
  background: #ddd;
}

/*demontration for zero-height child elements*/
.child:nth-child(2) {
  height: 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <!-- remove these to test with different child count --->
  <div class="child"></div>
  <div class="child"></div>
</div>

【讨论】：

【解决方案6】：

这是下面的代码，我想这可能对你有帮助

	.parent {
  
  display: -webkit-flex; /* Safari */
  display: flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {

  -webkit-flex: 1;  /* Safari 6.1+ */
  -ms-flex: 1;  /* IE 10 */    
  flex: 1;
  margin-left: 1%;
  background: #ddd;
}

<div class="parent">
  <div class="child"></div> 
</div><br>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div><br>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【讨论】：

【解决方案7】：

如果它用于固定数量的孩子，那么您始终可以通过（父宽度/孩子数量）计算孩子的宽度并将该宽度固定为孩子。但是如果你的代码有动态子，你可以使用 display 的 flex 属性。只需将display:flex 添加到您的.parent 和flex:1 到您的.child。

但是，这在浏览器兼容性方面几乎没有问题，如果您针对的是旧浏览器，则不建议这样做。即使有少数元素不支持 flex 属性。有关信息，请参阅此link。我建议编写一个 javascript 代码来计算孩子的宽度并添加属性。否则它很好地与 flex 一起使用！希望这对您有所帮助！你可以学习更多关于 flexbox 的知识here。

【讨论】：