Align similar content groups horizontally to make the page easier to scan.
When you have a design using repeating content that has different heights, such as profile cards with dynamic bio lengths be sure to look out for the horizontal alignment.
Aligning similar content groupings, such as buttons or dates, horizontally, can make the page easier to scan.
How do you achieve this?
It's super easy to align content horizontally like this using flexbox.
TLDR;
- Set the parent div to flex, display of vertical, aligned left
- Wrap content into separate divs
- Set parent to justify space-between