三列中的 Flexbox 项目

Question

我有一个弹性盒容器，其中包含 5 或 6 个项目。容器的

flex-direction

将设置为

row

。我想要的是像这样分配这些项目：第一个项目应该是第一列，第二个项目应该是第二列，其余 2 或 3 个项目应该总共是第三列，就像网格配置一样。

不幸的是，我无法更改 HTML 标记来添加对我有帮助的其他容器。它必须纯粹用 CSS 来完成（如果可以实现的话）。

我在 Flex 生成器中玩了一下，这是我最接近的（甚至不是很接近）...

  .flex-container {

    display: flex;
    
    justify-content: flex-end;  
    /* flex-flow: row wrap; */ 
    flex-direction: row; 
    flex-wrap: wrap; 

    background-color: #bbdefb;
    height: 100%;
    padding: 15px;
    gap: 5px;

  }

  .flex-container > div{
    background: #ffecb3;
    border: 3px solid #ffcc80;
    border-radius: 5px;
    padding: 8px;
  }


  .item1 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:auto;
  }
            
  .item2 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:auto;
  }
            
  .item3 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:flex-start;
  }
            
  .item4 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:flex-start;
  }
            
  .item5 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:flex-start;
  }

<div class="flex-container">
    <div class="item1">item 1</div>
    <div class="item2">item 2</div>
    <div class="item3">item 3</div>
    <div class="item4">item 4</div>
    <div class="item5">item 5</div>
</div>

有人可以帮我解决这个问题吗？

Answer 1

您可以使用 CSS 网格并将所有子项放置在第三列中的前两个之后。

.item {
  background: #ffecb3;
  border: 3px solid #ffcc80;
  border-radius: 5px;
  padding: 8px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.container > .item:nth-child(n + 3) {
  grid-column: 3;
}

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>