Как Flexbox считает размеры: собираем Masonry-раскладку без JavaScript

Flexbox знают почти все, кто верстал хоть один макет. Но мало кто понимает, как именно он считает размеры, а это знание позволяет строить красивые фотогалереи и карточные сетки без единой строки JavaScript.

Masonry — раскладка, где блоки разной высоты укладываются в плотную сетку без дыр, как в Pinterest. Обычно для этого тянут Grid или JS-библиотеки. В этом материале показывают, как собрать такое на чистом Flexbox, если элементы имеют известное соотношение сторон (например, 16:9 у изображений).

Чтобы наконец разобраться, почему элементы растягиваются именно так, а не иначе, читайте разбор на Frontend Masters.

#веб #фронтенд

@prog_point (теперь ещё в VK и Max)