在 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 个元素,但最终会更多,因此这需要可扩展。另外,如果可能的话,我宁愿不必更改标记。
最佳答案
让我对请求做一个小总结:
您有一个包含 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>
关于html - 我可以使用 flexbox 属性按列排序 div 网格吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72382747/