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

【问题标题】：flexbox resize child width should change only next sibling widthflexbox调整子宽度应该只改变下一个兄弟宽度
【发布时间】：2020-03-25 18:26:10
【问题描述】：

我有一个具有动态项目数的 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）的解决方案。

【问题讨论】：

你不能没有js
写这个问题似乎对 css 来说太具体了？

标签： css flexbox

【解决方案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>

【讨论】：