css - 如何使用 flexbox 模拟浮动？

Question

我正在尝试像浮动一样使用 flexbox。我希望 1 个孩子在右侧形成一列，其余孩子在左侧形成另一列。我无法添加额外的 HTML——我只能使用 CSS。

我已经想出了如何做到这一点，但我只需要两列在顶部对齐。我当前的代码的左列略低于右列。

https://jsfiddle.net/o2fbtuLc/

.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.child {
  max-width: 48%;
}

.right {
  margin-left: auto;
}

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>

标签： cssflexboxcss-float

Answer 1

CSS-Grid 可以做到这一点：

.parent {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: column;
}

.child {
  max-width: 48%;
  grid-column: 1;
  border: 1px solid green;
}

.right {
  grid-column: 2;
}

<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child right">Right</div>
</div>