Before Flexbox
Before flexbox, horizontal alignment was achieved using floated elements. To create a comment module, you’d float the image both the image and content area either to the left or right:
There are several considerations that you’d need to take in to account with this approach.
- If the width of
.profile-image
ever needs to be updated, you’d also have to update the left margin of the.comment-container
element. - A “clearfix” would also be needed so that preceeding block elements wouldn’t break this layout.
- If both
.profile-image
and.comment-container
content blocks were to display dynamic content, this type of layotu would not be able to support that without additional styling.
This makes for a somewhat complex and brittle approach to creating horizontal layouts.
Using Flexbox
With flexbox, this kind of layout becomes a lot easier to manage: