flexbox调整子宽度应仅更改下一个同级宽度

Question

我有一个flexbox容器，它有动态项目数。

所有项目都应填满容器的宽度。项目宽度应该相对于容器宽度，而不是以px为单位。

我希望每次都能调整一个项目的大小(除了最后一个(，并且它应该只改变自己和它右边的兄弟项目的宽度。例如，如果我有4个项目，最初每个项目的宽度应该是25%，如果我将项目1拖得更小，它的宽度应该减少到20%，项目2应该增长到30%，其余项目应该保持25%的相同宽度。

以下是我到目前为止的进展：

.container {
display: flex;
}
.item {
width: 25%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #4fa0f38c;
border: 1px solid white;
}
.item:not(:last-child) {
resize: horizontal;
overflow: auto;
}

<div class='container'>
<div class='item'>item 1</div>
<div class='item'>item 2</div>
<div class='item'>item 3</div>
<div class='item'>item 4</div>
</div>

我正在寻找一个使用css和flex(无js(的解决方案。

Answer 1

您可以依靠活动状态来模拟它，但它不是很准确，因为:active将触发任何点击事件：

.container {
display: flex;
}
.item {
width: 25%;
height: 60px;
display: flex;
flex-grow:1;
align-items: center;
justify-content: center;
background-color: #4fa0f38c;
border: 1px solid white;
}
.item:not(:last-child) {
resize: horizontal;
overflow: auto;
}
/* all the element should not shrink */
.container:active *{
flex-shrink:0;
}
/* allow only the right element to shrink*/
.item:active + * {
flex-shrink:1;
}
/* make the right element grow more (when we decrease the left one)*/
.item:active + * {
flex-grow:99999;
}

<div class='container'>
<div class='item'>item 1</div>
<div class='item'>item 2</div>
<div class='item'>item 3</div>
<div class='item'>item 4</div>
</div>