css - 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（和一些填充），然后给出更大的 square position: relative。较小的正方形应该有position: absolute，然后您可以将它相应地定位到较大的正方形。那应该是简短的，但是如果您仍然需要帮助，我可以稍后再进行一些演示。