长包裹柔性物品推动其他人

这个问题在这里已经有了答案:

  • html / css响应式3列布局 - 左下方的堆栈右列2个答案
  • 弹性物品是否可以与上面的物品紧密对齐? 5个答案
  • 在网格中做一个div跨两行答案

  • 对于使用单个容器垂直和水平排列项目,请使用grid而不是flex - 这就是它的用途!

    以下是grid解决方案的CSS,其中HTML保持不变:

    .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;
    }
    

    您可能想要在HTML中更改/添加类,以避免使用nth-of-type


    以下面的方式重新排列class="flex-item"

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

    然后,只需将flex-direction:column给容器。 并且不要忘记给max-height:(Anything less than your container height)


    .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/75699.html

    上一篇: long wrapped flex item pushing others down

    下一篇: grow in last row with flex