long wrapped flex item pushing others down

This question already has an answer here:

html/css responsive 3-column layout - stack right column below left column 2 answers

Is it possible for flex items to align tightly to the items above them? 5 answers

Make a div span two rows in a grid 2 answers

---

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 .

---

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>

链接地址: http://www.djcxy.com/p/75700.html

上一篇: 居中对齐div内的图像水平

下一篇: 长包裹柔性物品推动其他人