With every new revision of CSS, a plethora of new, exciting attributes come to light; one of which being the understated display: flex approach.
The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).
In today’s guide, we’ll be discovering the advantages of utilising the flexbox technique in our own layouts.
Some great features of the new model include:
- Easy ratio-based sizing; no need to touch your HTML
- Reorder with a breeze by using integers within the stylesheet
- Applies to all child elements within a correctly defined parent
- No more clearfixes!
In part 2 we’ll be taking a look on how to take this even further, and turn your flexbox layout into a fully-fledged responsive design!
Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.
No comments:
Post a Comment