如何使用flexbox使父div的宽度与子项的宽度相适应？
如何使用flexbox使父div的宽度与子项的宽度相适应？
提问于 2019-03-27 06:42:44
我有一个包含更多元素的flex父div，但是父元素的宽度不适合子元素，我该如何修复它？
基本上，我想要显示一个由用户设置的维度的二维矩阵，所以元素的数量会变化，会有一些换行，就像我在下面的代码中显示的那样，子元素的宽度和高度也是固定的。
.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/
我希望父元素自动将其宽度设置为它内部的元素。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-27 07:01:21
您可以通过一个简单的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55367218
复制相关文章
相似问题