Question

我有一个flexbox容器，其中包含 dynamic 个项目。

所有项目均应填充容器的宽度。物品的宽度应相对于容器的宽度，而不是以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>

我正在寻找使用带Flex（没有js）的CSS的解决方案。

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>

flexbox调整子宽度的宽度仅应更改下一个兄弟宽度

1 个答案: