Flexbox is great for building 2D grids quickly and easily. It has pretty much replaced the use of the Float property when laying out content. But, one of the issues you might find is how efficiently it spaces your items within the grid…
For example, let’s say we have a grid of profile cards. We set the flexbox property of
display: flex; on their container and use
justify-content: space-between; to spread them evenly on the horizontal axis. This is all good until we have a grid with an odd number of items per row, when the last row displays an even number of items. We get this:
The last two items justify themselves to the edges of our container, leaving a gap in the centre. It doesn’t look good so we want to fix this and align the row to the left, closing the gap.
Fixing this is simple and to do it, we use a pseudo element. Going back to our container, (in this case, my container has a class of .speakers), we use the ::after element to create an empty item. We set the following:
This empty item has a flex property of auto, making it fill the available space and push the previous element to the left. So we get this:
Much better! If there is an even number, our empty container shifts to the next line, letting our grid do it’s thing properly.CSS CSS3, Web design, Website designer