css - flexbox 调整子宽度应该只改变下一个兄弟宽度

Question

我有一个 flexbox 容器，它有 动态东西的个数。

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

我希望每次都能调整一个元素的大小(最后一个除外)，并且它应该只更改自身及其右侧兄弟元素的宽度。例如，如果我有 4 个元素，最初每个元素的宽度应该是 25%，如果我把 item1 拖得更小，它的宽度应该减少到 20%，item2 应该增长到 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>