Breaking and bending Flexbox on the quest for the...
summary
Shows a concrete method to get masonry from Flexbox by using order per column via :nth-child plus inserted collapsed flex break elements that act like line breaks. Implementation renders columns top-to-bottom but sorts left-to-right (example: 1 4 7 2 5 8 3 6 9), scales to three or four columns with :nth-of-type and span hacks, and reduces JS to setting container height and occasional ordering logic. It works and can outperform heavy JS libraries, but needs explicit container height or JS measurements to produce truly optimal placement.
AI-written summary · about
chapters (7)
- 0:00Start
- 1:33Masonry and Why It's Difficult
- 3:47Columns
- 5:57Stacked Ordering
- 6:44Order Property
- 15:16Flexbox Line Break
- 20:57Complaints about Myths Using Flexbox
