Как реализовать такую сетку с помощью flex?

Question

[Sergen23]

Сразу скажу, нельзя использовать grid.
Каждый item это изображение, желательно что бы его добавили через html, а не CSS)

Заранее, большое спасибо!)

Comments

[Rustam Bainazarov]

Я вижу свастику.

[Sergen23]

хех...не моя идея) лучше бы с кодом помогли)

[Rustam Bainazarov]

Sergen23, я не вижу нормального пути сделать это на flex.

[Sergen23]

Рустам Байназаров, а если, на крайняк, js добавить?

[Rustam Bainazarov]

Sergen23, JS не нужен. Куча обёрток + отрицательный margin у одного блока да и padding или margin у другого (костыль), ну или добавлять и убавлять ширину (костыль).

Или вообще на absolute сделать можно, если контент не тянет габариты.

[Sergen23]

Рустам Байназаров, у меня еще блоки с текстом поверх должны идти, т.е. если я задам для item absolute, я не смогу наложить span с текстом, правильно?
p.s. извиняюсь если вопрос глупый!))

[Rustam Bainazarov]

Sergen23, да нет, нормальный вопрос. Жаль, разметка и стили будут костыльными, но что поделать, если нельзя grid.

[Rustam Bainazarov]

Sergen23, посмотрите ответ origami1024, там как раз такой рабочий вариант. Лучше, если и можно, то не на много.

Answer 1

[origami1024]

1. item4 задается высота 200%
2. item5 margin справа ~33%

Comments

[Rustam Bainazarov]

Не совсем по макету. 4-й должен быть как 1-й по высоте и занимать 2-ю и 3-ю строчку.

[origami1024]

Рустам Байназаров, это только что съехало уже в процессе наложения стилей, сейчас поправлю) Проблема в переменных стилуса, которые calc не хочет хавать, ща назад их верну либо разберусь как сделать