CSS
Flexbox Media Object Layout
Implement the classic 'media object' pattern (image and content side-by-side) using Flexbox for flexible alignment and spacing.
.media-object {
display: flex;
align-items: flex-start; /* Aligns items to the top by default */
gap: 15px; /* Spacing between image and body */
padding: 15px;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.media-object__image {
flex-shrink: 0; /* Prevents image from shrinking */
width: 60px; /* Example fixed width for image */
height: 60px; /* Example fixed height for image */
border-radius: 50%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.media-object__body {
flex-grow: 1; /* Allows body to take remaining space */
}
.media-object__title {
margin-top: 0;
margin-bottom: 5px;
font-size: 1.1em;
color: #333;
}
.media-object__text {
margin-bottom: 0;
color: #666;
}
How it works: This snippet creates a versatile 'media object' layout using Flexbox, ideal for displaying items like user comments, product listings, or news feeds. The `.media-object` container is a flex container, arranging an image (or avatar) and textual content side-by-side. `flex-shrink: 0` on the image ensures it maintains its defined size, while `flex-grow: 1` on the body allows it to occupy the remaining horizontal space. The `gap` property provides clean spacing between the image and content, and `align-items: flex-start` ensures top alignment.