@novelette

Возможно ли на флексах построить такую ленту блоков?

Суть в том, что сервер может отдавать любую последовательность блоков ленты, как на картинке. Внутри этих блоков будет текст. Количество блоков можно быть много, поэтому будет предусмотрена прокрутка. Как можно автоматизировать расположение блоков в ленте, чтобы они всегда располагались оптимально и красиво, как на картинке?

Пробовал использовать Masonry, но он не может правильно расположить блок №4 под блоками №3 и №2. Можно ли такое сделать на флексбоксах? Я пробовал делать, но без обёрток не получается. Возникла мысль оборачивать прямо на сервере в отдельный .wrapper такие блоки, как 2 и 3. Причем, у главного контейнера указывать flex-flow: column wrap, а у .wrapper — flex-flow: row wrap. В общем, иными словами, на сервере просчитывать "условности" какие блоки оборачивать в дополнительный блок.

Но как сделать правильнее? Можно ли вообще клиенту просто отдавать обычный JSON, где будет для каждого прямоугольника описана высота/ширина, а некоторый код будет его парсить и проставлять CSS-свойства блокам и вставлять их в DOM, а браузер уже сам например на флексах построит последовательность, как на картинке?

5da5a6e3e64c5276803729.png
  • Вопрос задан
  • 206 просмотров
Пригласить эксперта
Ответы на вопрос 3
origami1024
@origami1024
went out for a night walk
Сверстай на таблицах.
Используй атрибуты colspan и rowspan, чтобы сделать ячейки занимающие 2 места в длину и/или высоту
вот базовый пример:
https://www.w3schools.com/tags/tryit.asp?filename=...
Ответ написан
@GssGenic
Программист со стажем более 20 лет.
Может так?

ISOTOPE
Ответ написан
@tosrer
да, отдавай json и пусть клиентский скрипт сам разбирает данные и генерит элементы
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Panda Media Нижний Новгород
от 35 000 руб.
Sveak Барнаул
от 50 000 руб.
Team B Воронеж
от 35 000 до 50 000 руб.
22 нояб. 2019, в 10:46
500 руб./за проект
22 нояб. 2019, в 10:40
70000 руб./за проект