long wrapped flex item pushing others down

Question

I've got 3 divs of different lengths in a flex box. Each div is 47% width. I am using flex wrap to have them wrap. The longest div is second in the order and pushes the third div all the way down to where it ends. Is there anyway to have the third div come right up under the first div.

CodePen

HTML

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS

.flex-box{
  display: flex;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  justify-content: space-between;
  align-items: flex-start;

}
.flex-item{
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

Experiment with the `.flex-item{width: 47%;}` or add `.flex-item{margin-right: 3%;}`. — VXp, Nov 15 '17 at 21:21

score 0 · Answer 1 · answered Nov 15 '17 at 21:22

For arranging items both vertically and horizontally with a single container, use grid rather than flex -- that's what it's for!

Here's the CSS for a grid solution, with the HTML unchanged:

.flex-box{
  display: grid;
  grid-template-columns: 47% 47%;
  grid-template-rows: 78px auto;
  background: black;
  width: 500px;
  justify-content: space-between;
  align-items: start;

}
.flex-item{
  width: 100%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

.flex-item:nth-of-type(2) {
  grid-row-start: span 2;
}

You may want to change/add classes in the HTML to avoid fiddling with nth-of-type.

score 0 · Answer 2 · answered Nov 15 '17 at 21:26

Rearrange the class="flex-item" in the below manner.

<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div> //Longest div container

And then just give flex-direction:column to the container. and not to forget to give max-height:(Anything less than your container height) to your container.

.flex-box {
  display: flex;
  flex-direction: column;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  max-height: 520px;
  justify-content: space-between;
}

.flex-item {
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>

  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

long wrapped flex item pushing others down

2 Answers2