Make flex item expand on hover, shrinking its siblings

问题

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.

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>

See it on CodePen

回答1:

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.

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.

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>

回答2:

I have tried my best to get them aligned in the same container but they don't seem to fit there. It is better for you to take them in separate containers.

By this, they will look good and you could do some easy stylings if you need to apply separately.

Here is the Fiddle

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.box {
  width: 30%;
  flex: 1 1 2%;
  transition: all 0.3s ease-in-out;
}

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

<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>

<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>

来源：https://stackoverflow.com/questions/47363911/make-flex-item-expand-on-hover-shrinking-its-siblings

标签

html

css

css3

flexbox