时间戳

首页 > 解决方案 > flexbox调整子宽度应该只改变下一个兄弟宽度

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

问题描述

我有一个具有动态项目数的 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>

我正在寻找使用带有 flex（无 js）的 css 的解决方案。

标签： cssflexbox

解决方案

您可以依靠活动状态来模拟这一点，但它不是很准确，因为: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>

推荐阅读