Lately I’ve been dipping my toes into the Flexbox pool. So far, the water is fine.
I set out to solve a problem that happens when floated widgets in a grid layout are not all the same height, and they get hung up as they reflow.
What should look like this:
…ends up at certain screen widths looking like this:
Flexbox solves this problem by stretching each widget in a row to the height of the tallest widget in that row. The results look like this:
I made a flexbox widget tutorial, showing how I used the flexbox layout model to create multiple rows of side-by-side widgets.