如何使用flexbox使父div的宽度适合子项宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (98)

我有一个内部有更多元素的flex父div,但是父宽度不适合子元素,我该如何修复它?

Basicaly我想要显示一个由用户设置尺寸的dinamical二维矩阵,因此内部元素的数量会有所不同,并且会有一些换行符,如我在下面的代码中显示的那样,子元素的宽度和高度也是固定的。

.parent {
  display: flex;
  flex-wrap: wrap;
  background-color: silver;
  padding: 5px;
  border-radius: 10px;
}

.child {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: gold;
  margin: 5px;
}

.line-break {
  width: 100%;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

这里也是代码:https//jsfiddle.net/NoisyApple/4g8n3vfL/3/

我希望父级自动将其宽度设置为其中的元素。

提问于
用户回答回答于

您可以通过简单的inline-block配置执行此操作:

.parent {
  display:inline-block;
  background-color: silver;
  padding: 5px;  
  border-radius: 10px;
  font-size:0; /*to remove whitespace:*/
  margin:5px;
}

.child {
  height: 40px;
  width:40px;
  display:inline-block;
  vertical-align:top;
  border-radius: 10px;
  margin:5px;
  background-color: gold;
  font-size:initial;
}

.line-break {
  display:block;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>
<br>
<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='line-break'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

扫码关注云+社区

领取腾讯云代金券