CSS Issues Solved with Flexbox (No More Magic Numbers)
The Flexbox layout provides a more efficient way to layout, align, and distribute space among items in a container, even when their size is unknown and/or dynamic. Below are some examples of difficult layout issues we encounter regularly and how easy it is to fix them using the power of Flexbox.
1. Media Unit
Introduction: The media unit is a pattern we use/reference on a daily basis. It consists of an image to the left and some type of content to the right or vice versa. The content area can hold any type of object. In most cases it’s just text, but it could be unknown, and we need to allow for the content to change as needed.
Issue: The standard setup is floating the image, and applying overflow hidden to the content section div so we can force it to take up all of the remaining space beside the image. It’s super solid until you want to do something like this:
To accomplish either of the above layouts you would need to add some padding to the parent element to push the content down to the desired location. This is not ideal when trying to build flexible layouts. If we were to add more content, forcing text to wrap to additional lines, or add any new elements, we would need to revisit our CSS to modify the magic number we used for the padding.
Solution: With Flexbox, you can make the container a flex container by declaring display:flex and setting the align-self property on the content div. For vertically centered content we set it to center, and bottom aligned content would be flex-end. That’s it, we don’t have to rely on any static values to move our content.
Demo:
2. Pinned Elements
Introduction: I have a few e-commerce items with varying descriptions that are all equal height, and I want to position a “Buy Now” button at the bottom of each module.
Issue: To accomplish the equal height items we would need to define a min-height that is equal to the tallest item. Then use position:absolute to stick the buttons to the bottom of the container. This works! But it is not flexible. We could run into issues where text could fall behind the button, and we would have to keep updating the min-height if we add/remove content. This can be very aggravating, having to rely on magic numbers for values in our CSS.
Solution: Using Flexbox we can set up the content in each module to be displayed in a column layout. And by simply adding margin-top: auto to the button, the Flexbox layout will automatically push the button to the bottom of the container regardless of the length of the content above it.
Demo:
3. Flexible Grid
Introduction: We have a row of items that we want to take up equal space across the row. The row starts with three items, but we’re not sure if there will be more items added/removed later.
Issue: Making a flexible grid isn’t too difficult if you know how many items you need to fit in a row. For three items, we could set the width of each item to ~30% and add some margin for spacing. We now have three items that will distribute the available space evenly. Each time we need to add/remove an item we would need to revisit the width and adjust the percentage. By taking one away we would need to go back and modify our width to be 50% for each element. To truly build a flexible layout, we want to avoid hard coded magic numbers whenever possible.
Solution: Defining values is how we actually break the inherit flexibility of the web. Using Flexbox, we can create a flexible content section without having to back ourselves into a corner. After setting display flex on the parent div, we can set the flex value of the children to 1 and they will automatically distribute the available space evenly between the items.
Demo:
Resources:
