возможна ли такая компоновка с flexbox или response-css-grid?

Question

Я собираюсь начать реактивный проект, и он предполагает немного сложную компоновку, и он должен быть отзывчивым.

Я нарисовал черновую диаграмму того, что мне нужно сделать, и отметил местагде я нахожу это трудным для выполнения.

Не могли бы вы сказать мне, если такой тип компоновки может быть выполнен в реакции с либо flexbox или response-css-grid, или, может быть, что-то еще ??если есть ссылка, вы можете указать мне учебник или статью, объясняющую это, тогда это будет очень полезно.

Вот изображение

Answer 1

Flexbox должно быть достаточно.Вы можете использовать flexbox-direction: column для базовой страницы и назначать соответствующие классы CSS для компонента React, который вы будете использовать для создания этого макета.

Для A вы можете использовать transform: skewY () но элемент ниже должен разместить новое пространство после перекоса элемента A.

Что касается B, это легко сделать с помощью flexbox.Обоснуйте элементы до flex-start (и немного отступов), а затем увеличьте квадрат до position: relative.Меньший квадрат должен иметь position: absolute, и затем вы можете расположить его соответственно большему квадрату.Это должно быть в коротких строках, но я могу показать немного позже, если вам все еще нужна помощь.