flexbox或react-css-grid是否可以实现这种布局？

Question

我将要开始一个React项目，它涉及到一些复杂的布局，需要响应。

我在需要做的事情上画了一个粗略的图，并标出了我发现很难完成的地方。

您能告诉我是否可以通过flexbox或react-css-grid或其他方式完成这种布局吗？ 如果有一个链接，您可以将我引向一个解释这的教程或文章，那么那将非常有帮助。

这是图片

Answer 1

Flexbox应该足够了。您可以将flexbox-direction: column用于基础页面，并将适当的CSS类分配给用于构建此布局的React组件。

对于A，您可以使用transform: skewY()，但是下面的元素应该在使元素A倾斜之后容纳新的空间。

关于B，可以使用flexbox轻松完成。将项目对齐到flex-start（和一些填充），然后给出更大的正方形position: relative。然后，较小的正方形应具有position: absolute，然后可以将其相应地定位到较大的正方形。应该是简短的内容，但是如果您仍然需要帮助，我可以稍后再演示一些示例。