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: