ImagesLesson 81Free preview

Side-by-Side Images

This lesson is part of How To · All levels

Summary

Side-by-side images display two images side by side for comparison or visual pairing. Flexbox with flex: 1 divides space evenly, while gaps keep distance. On a narrow screen, images can be stacked vertically to keep them easy to see.

Key points

Display: flex places the image in one line.
Flex: 1 makes both images share width evenly.
The gap gives the distance without adding margin to each item.
Media queries convert the flex-direction into columns on a small screen.
Object-fit: the cover keeps the image neat in the same box.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.