flex-wrap：带行和列的nowrap

Question

我有一个带有nowrap流的flex容器，某些项目可能从列开始，如何管理它们？就像树的布局。 最终结果可能如下图所示：  

这是一个stackblitz和摘要：

.container{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  padding: 5px;
  border:2px solid gray;
}

.item{
  width: 150px;
  flex:1 1 150px;
  border: 1px solid green;
  margin-right: 2px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Answer 1

我可以考虑使用CSS网格布局轻松实现此布局：

• 使用grid-auto-flow: column，以便将项目沿列方向放置，

• 对特定的grid-row元素使用grid-column和item，以实现所需的配置。

请参见下面的演示

.container{
  display: inline-grid; /* inline grid container */
  grid-auto-flow: column; /* items placed vertically */
  padding: 5px;
  border: 2px solid gray;
}

.item:nth-child(2) {
  grid-row: 1;
}
.item:nth-child(4),
.item:nth-child(5) {
  grid-row: 2;
}

.item:last-child {
  grid-row: 4;
}

.item{
  width: 150px;
  border: 1px solid green;
  margin-right: 2px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Answer 2

您可以通过使用表格来做到这一点。

<table>
  <tr>
    <td class="item">1</td>
    <td class="item">2</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="item">3</td>
    <td class="item">4</td>
    <td class="item">5</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="item">6</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td class="item">7</td>
    <td class="item">8</td>
  </tr>
</table>