@novelette

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

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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы