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-imageever needs to be updated, you’d also have to update the left margin of the
- A “clearfix” would also be needed so that preceeding block elements wouldn’t break this layout.
- If both
.comment-containercontent 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.
With flexbox, this kind of layout becomes a lot easier to manage: