我有一个div嵌套在一些flexbox中,这些flexbox动态地改变宽度,取决于其中的文本有多长。
使用纯CSS是否可能使包含的flexbox也随之改变宽度和自动换行?如果不行,我也可以考虑任何JavaScript解决方案。
以下是更好的理解我所说的内容的视觉效果: 如果有人想要尝试一下,这里是代码片段:
使用纯CSS是否可能使包含的flexbox也随之改变宽度和自动换行?如果不行,我也可以考虑任何JavaScript解决方案。
以下是更好的理解我所说的内容的视觉效果: 如果有人想要尝试一下,这里是代码片段:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 auto;
border: 1px solid black;
margin: 5px;
}
.root {
max-width: 600px;
border: 1px solid black;
}
.level-2 {
background-color: tomato;
}
.level-3 {
background-color: cornflowerblue;
}
<div class="flex-container root">
<div class="flex-container flex-item level-2">
<div class="flex-item level-3">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>
<div class="flex-item level-3">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>
</div>
<div class="flex-container flex-item level-2">
<div class="flex-item level-3">
<div>Some text</div>
<div>Some longest text over here</div>
<div>Some text</div>
<div>Some text</div>
</div>
<div class="flex-item level-3">
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
</div>
</div>
</div>