By now everyone is likely to be using Flexbox with a potential fallback for display:table just above the display:flex or a clever SASS/LESS mixin if you happened to of created one (which I recommend). One thing I find myself repeatedly using Flexbox for is generally the same. Although I am always trying to keep my knowledge up to date so I will keep pushing the boundaries of flexbox to achieve some more elegant layout solutions than what I do currently.
Aligning Content Vertically With Flexbox
This is probably my most common use of flexbox, followed very closely by the other use below. Using the following properties allow you to center align elements vertically inside a containing element (the flex parent).
.flexbox-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
You can swap out the align-items for flex-start if you don’t want to horizontally align the items, but it’s likely you will want to align them dead centre.
Stretching Items To Full Height
The next time I use flexbox is to stretch items in a row to full height so that the border or background matches correctly and creates a consistent edge across the bottom of all the items. This is used quite commonly, especially on product listing pages or blog post grids.
.flexbox-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
}
A quick note on this one: If you stretch your items and use the align-items: space-between property then you will notice that the last element inside the flexbox is positioned to the far right. The best solution I have seen to get around this is to add an extra element to fill up the space (done server side). So if your grid is made up for 12 elements, but you only have 11 products, add an additional blank div in there to force the correct spacing.
Hope this quick blog helps someone, stay tuned for even more flexbox goodness! Leave your questions and comments below.
Keep on coding!
Comments