html - 我可以使用 flexbox 属性按列排序 div 网格吗？

Question

这是我需要实现的目标: (注意空的灰色插槽)

在 flexbox 布局中通常应该像这样:(如果 flex-wrap 设置为 wrap)

我知道这可能是 achieved使用 CSS 网格布局

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 400px;
}

.parent div {
  border: 1px solid;
  box-sizing: border-box;
}

div:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
div:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
div:nth-child(4) { grid-area: 2 / 1 / 3 / 2; }
div:nth-child(5) { grid-area: 2 / 2 / 3 / 3; }
div:nth-child(6) { grid-area: 3 / 1 / 4 / 2; }
div:nth-child(7) { grid-area: 3 / 2 / 4 / 3; }

<div class="parent">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div> 
</div>

问题是我想与 justify-content: space-between 或 gap 一起使用，因为在我的场景中子元素更窄并且感觉不太舒服使用 CSS 网格。

例子:

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.parent div {
  border: 1px solid;
  box-sizing: border-box;
  width: calc(33% - 4px);
  height: 150px;
  margin-bottom: 8px;
}

/* just to illustrate: child(6) */
.parent div:nth-child(6) { transform: translate(calc(-100% - 8px), calc(100% + 8px)); }

<div class="parent">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div> 
</div>

这可以用 flex 完成吗？

现在有 7 个元素，但最终会更多，因此这需要可扩展。另外，如果可能的话，我宁愿不必更改标记。

Answer 1

让我对请求做一个小总结:

您有一个包含 3 列的 flex 容器。当有 3n+1 项时，最后 2 个元素必须在最后一行，在上一行留空。

您可以使用 2 个伪元素作为填充物来获得此结果(对于某些 flex 配置，可以跳过第二个伪元素)。您需要使用一些高级的 nth-child 选择器来正确设置它们。

在片段中查看此选择器如何触发，如背景颜色所示。

伪元素的边框为 0 像素，您可以将其更改为可见。

.parent {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: solid 1px blue;
  margin: 5px;
  width: 100px;
}

.parent div {
  border: 1px solid;
  box-sizing: border-box;
  width: calc(33% - 4px);
  height: 30px;
  margin-bottom: 8px;
}

.parent div:nth-child(3n):nth-last-child(2) {
    background-color: yellow;
    order: 3;
}
.parent div:nth-child(3n+1):nth-last-child(1) {
    background-color: lightgreen;
    order: 3;
}

.parent:before {
  content: "";
  box-sizing: border-box;
  width: calc(33% - 4px);
  height: 0px;
  order: 2;
}


.parent:after {
  content: "";
  box-sizing: border-box;
  width: calc(33% - 4px);
  height: 0px;
  order: 4;
}

.parent:before, .parent:after {
  border: 0px solid red; /* change to 1px to show them */
}

<div class="parent">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div> 
</div>

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

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

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