使弹性项目在悬停时扩展，从而缩小其同级对象 [英] Make flex item expand on hover, shrinking its siblings

问题描述

我正在尝试解决一个flexbox问题，我希望每行具有三个div，第一个的大小相等，但是当将div悬停时，一个div增大，而同一行的另一个div缩小.以为我已经解决了它，直到我尝试了多行.

I'm trying to solve a flexbox issue where I want to have three divs per row, first equal in size, but when hovering a div, that one grows and the other ones on the same row shrink. Thought I had solved it until I tried it over multiple rows.

我想要的是将鼠标悬停在第三个div上时，它将缩小第一和第二个div，其余部分保持不变.我无法弄清楚那部分.

What I want is when hovering the third div, it would shrink the first and the second div, and leave the rest unchanged. And I can't figure that part out.

下面是我的单行工作解决方案.

Below is my single-row working solution.

此布局也可以跨多行工作吗?

Can this layout work over multiple rows as well?

我是否必须将每一行都包装在单独的容器中，或者有什么方法可以解决此问题?

Do I have to wrap each row in a separate container or is there a way to solve this?

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.box {
  width: 33%;
  flex: 1;
}

.box:hover {
  flex-grow: 3;
}

<div class="container">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. </p>
  </div>

  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. </p>
  </div>

  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. </p>
  </div>
</div>

在CodePen上查看

推荐答案

我是否必须将每一行都包装在单独的容器中，或者有什么方法可以解决此问题?

Do I have to wrap each row in a separate container or is there a way to solve this?

您需要将每一行包装在单独的容器中.

You would need to wrap each row in a separate container.

Flexbox无法进行布局，因为启用了 wrapping .

The layout is not possible with flexbox because wrapping is enabled.

这意味着在不触发换行的情况下，不能在缩小其同级的同时使单行中的项目扩展. 当兄弟姐妹可以包裹时，没有什么可以迫使它们缩小的.

This means that items in a single row can't be made to expand while shrinking its siblings without triggering a wrap. There's nothing to force the siblings to shrink, when they can just wrap.

在没有flex-wrap: wrap的情况下，行长度具有硬限制.然后，您可以在悬停时提供任意长的项(在我的示例中，我使用flex-basis: 100%)，并且可以在缩小其同级项的同时进行扩展，而无需任何包装问题.

Without flex-wrap: wrap the row length has a hard limit. You can then give an item any large length on hover (I use flex-basis: 100%, in my example), and it can expand while shrinking its siblings, without any wrapping concerns.

.container {
  display: flex;
}

.box {
  flex-basis: 33.33%;
}

.box:hover {
  flex-basis: 100%;
}


/* for demo only */
.box {
  transition: .5s;
  border: 1px dashed red;
  box-sizing: border-box;
}

<div class="container">
  <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </p>
  <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </p>
  <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </p>
</div>

<div class="container">
  <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </p>
  <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </p>
  <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. </p>
</div>

这篇关于使弹性项目在悬停时扩展，从而缩小其同级对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！