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

Question

我即将开始一个 react 项目，它涉及到一个有点复杂的布局，它需要响应式。

我画了一张粗略的图表，说明我需要做什么，并标出了我觉得难以完成的地方。

你能告诉我这种布局是否可以通过使用 flexbox 或 react-css-grid 或其他东西来完成？ 如果有链接，您可以将我指向解释此问题的教程或文章，那将非常有帮助。

这是图片

Answer 1

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

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

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