Create a Media Object with Flexbox
You can use flexbox to align some text alongside an image or other media — sometimes referred to as a "media object".
Media object is a common term given to a UI component where there's an image on one side and text on the other. The image could be on the left or right — it doesn't matter. Usually the text doesn't wrap around the image — it stays on its own side and the image stays on it's own side.
Actually, it doesn't necessarily need to be an image and text. It could be a video/text combination, an image/form combo, or even an image/image combo, etc.
It's a pretty basic concept, but generally, media objects need to be quite flexible. They need to expand/contract to fit their contents and/or their environment. Also, they need to be able to cater for content of all sizes without getting all skewed out of proportion.
So let's take a look at how we can use flexbox to create a media object.
The base markup we used goes something like this:
So we've attached a few classes to the markup. We can now style those elements as required.
We set flex: 1 on the media-body class to ensure that it grows to take up the remaining space. We don't do that for the media-object, as we only want it to take up the space of its own content, and no more. But we do set a right margin, so that the text doesn't push up too close to the image/object.
Note that we use align-items: flex-start on the flex container (media). This aligns all flex items with the cross-start edge of the line. So basically, they're aligned to the top of this flex container. The initial value for the align-items property is stretch, so if we didn't set this value, the image would've stretched to match the height of the text.
Image on the Right
We can switch it around so that the image goes on the right and the text on the left. We can do this by adjusting the order of the flex items.
Here's the bit where we change the order:
So we used the order property. The initial value of this property is zero, so any positive number will place it after any elements that haven't had this property set. Any negative number places it before. So in other words, a higher the order number, the further back it goes.
We could apply order: -1 to the media-body class instead — it would had the same effect.
You'll notice that we've also changed the right margin to a left margin now that the image is on the right.
Nested Media Objects
When you create media objects like this, you can nest them inside each other.
Like this:
In this case we just placed another media object inside the other one's media-body.
Non-Image Media Objects
The media object doesn't necessarily need to be an image. It could be a video, a form element, or anything really.
Here's an example of using an HTML entity to display an icon:
In this case, we set a font size on the media-object class so that the icon displays at a reasonable size. We also reduced the right margin accordingly.
Here's another example, but this time using a unicode emoji: