Aligning Elements In Last Flexbox Row

I know this question has been asked several times here, but unfortunately, none of the solutions really works and maybe there's a better way of achieving what I need in the meanwhi

Solution 1:

It appears you've covered most, if not all, methods for last-row alignment available in current flexbox.

Hopefully, a future iteration of the spec will include alignment properties such as last-row, last-column, only-child-in-a-row, etc.

In the meanwhile, we need to hack it with the methods you've listed.

There are also these options to consider: (The second option is mostly FYI, as most browsers haven't completed implementation.)

• Desandro Masonry

  Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

• CSS Grid Layout Module Level 1

  This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.