Css 弯曲砌体效果未正确包裹

我试图用flex实现以下布局，但似乎无法实现：

* { 框大小：边框框； } .盒子{ 边框：1px纯黑； 宽度：50%； 垫面：25%； 浮动：左； } .盒子：第一个孩子{ 垫面：50%； } .box:第n个最后一个孩子-n+2{ 宽度：25%； }

---

使用FRAMBOX，你可以考虑一些黑客来近似这个。一个技巧是让两行保持行方向，并在第一个元素上使用负边距使其与第二行重叠：

* { 框大小：边框框； } .包装纸{ 显示器：flex； 弯曲方向：行； 柔性包装：包装； } .盒子{ 外形：1px纯黑； 宽度：50%； 垫面：25%； } .盒子：第一个孩子{ 垫面：25%； 利润底部：-25%； } .box:第n个最后一个孩子-n+2{ 宽度：25%； } .box:nth-child3{ 左边距：自动； }

---

如果这四个框都是同一个父对象的子对象，我想你至少需要引入另一个分组元素……这里的问题是你不能只在一个维度上工作，你没有行或列，两者都有——这意味着这将是CSS网格的一项工作。嗯，我也这么认为。我正在考虑使用网格，这可能是我进入网格所需要的推动力