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.
See the Pen 79ffbb458a334a29c4c18c9ecd1c700d by Matthew Horne (@horne3754sg) on CodePen.0
The solution that I have seen so far involves adding some extra “Ghost Markup” to the HTML to trick the browser.
See the Pen 4e6c20bc21171153dec90ae29555a1f5 by Matthew Horne (@horne3754sg) on CodePen.0
After playing around with this I found a solution that works and doesn’t require any extra markup.
See the Pen Flex Grid Without Ghost Markup (correct method) by Matthew Horne (@horne3754sg) on CodePen.0
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.
