基本上，我希望1，2和3都具有相同的宽度，同样，如果4，5，6等在运行时动态添加。 用纯CSS有可能吗？
null
x = 4;
$("button").on("click", () => {
$(".active").removeClass("active").append(`
<div class="flex active">
<div>
${x++}
</div>
</div>
`);
});.flex {
display: flex;
flex-direction: row;
box-sizing: border-box;
border-left: solid 1px #000;
}
div {
flex: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
<div>
1
</div>
<div class="flex">
<div>
2
</div>
<div class="flex active">
<div>
3
</div>
</div>
</div>
</div>
<button>add</button>null
可以使用display:contents降低嵌套级别:
null
x = 4;
$("button").on("click", () => {
$(".active").removeClass("active").append(`
<div class="flex active">
<div>
${x++}
</div>
</div>
`);
});.flex {
display: flex;
flex-direction: row;
}
.flex .flex {
display:contents;
}
div {
flex: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex">
<div>
1
</div>
<div class="flex">
<div>
2
</div>
<div class="flex active">
<div>
3
</div>
</div>
</div>
</div>
<button>add</button>
您可以使用css网格列:
null
#a {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#a {
background-color: #f77;
}
#b {
background-color: #7f7;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 2 span;
}
#c {
background-color: #77f;
}<div id="a">
<div class="first">
1
</div>
<div id="b">
<div>
2
</div>
<div id="c">
<div>
3
</div>
</div>
</div>
</div>