一个简单的解决方案是使用
display: grid在
display: grid/* In 2 columns of same size, auto place item by row and fill gaps */
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
然后，
leftrightgrid-columndiv这是一个简单的例子：
.row {
display: grid;
width: 500px;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow: row dense;
gap: 12px;
outline: 2px solid #000;
padding: 12px;
}
.cell {
padding: 12px;
}
.left {
grid-column: 1 / span 1;
background-color: pink;
}
.right {
grid-column: 2 / span 1;
background-color: lightgreen;
}<div class="row">
<div class="cell left">A</div>
<div class="cell left">B</div>
<div class="cell right">C</div>
<div class="cell left">D</div>
<div class="cell right">E</div>
<div class="cell left">F</div>
</div>查看此解决方案。
基本上，我们正在创建一个沿列方向弯曲的弹性容器，以便所有元素都位于彼此下方。然后我们增加宽度，以便有足够的空间让单元格位于左侧，单元格位于右侧。最后，在弹性容器中，您可以垂直或水平对齐元素以开始、居中或结束。由于我们有 2 个不同的类，具有 2 种不同的对齐方式，因此我没有在父元素（行）上执行单个对齐项目，而是在每个类上进行了 2 个自对齐，一个在 flex-start 上，另一个在 flex-end 上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.row {
display: flex;
flex-direction: column;
width: 200px;
}
.left {
align-self: flex-start;
}
.right {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="row">
<div class="cell left">A</div>
<div class="cell left">B</div>
<div class="cell right">C</div>
<div class="cell left">D</div>
<div class="cell right">E</div>
<div class="cell left">F</div>
</div>
</body>
</html>