Flex is a CSS property that allows developers to more easily layout and align content. Flex has been a long time coming and something that has been sorely missing from the developers arsenal for a long time. But finally it is supported widely enough to be deployed and utilized as an essential part of development projects.
One a project I have been working on I recently encountered a problem which had been brought to my attention previously. The problem was that when you made a grid layout, the rows must be complete otherwise you end up with the last item being aligned to the right, leaving a gap in the middle.
The solution that I have seen so far involves adding some extra “Ghost Markup” to the HTML to trick the browser.
After playing around with this I found a solution that works and doesn’t require any extra markup.
The solution here was not to use
justify-content: space-between; on the parent element.
For a more complete example of a Flex Grid layout check out Responsive Flex Grid without Extra Markup.
For more information on Flex check out Chris Coyier’s complete guide to Flex.