【问题标题】:is this sort of layout possible with flexbox or react-css-grid?flexbox 或 react-css-grid 可以实现这种布局吗?
【发布时间】:2023-04-04 22:33:01
【问题描述】:

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

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

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

这是图片

【问题讨论】:

  • 您可能想考虑使用 SVG,svg 本质上是响应式的,并且与 React 配合得很好。
  • 你能分享一个链接来解释如何做到这一点吗?

标签: css reactjs layout flexbox react-flexbox-grid


【解决方案1】:

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-01-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-06-29
    • 1970-01-01
    • 2019-08-24
    • 1970-01-01
    相关资源
    最近更新 更多