Responsive image gallery in FlexBox

date
Nov 22, 2022
slug
responsive-images-with-flex
status
Published
tags
Bugfix
CSS
FlexBox
summary
type
Post

Background

I tried to add a responsive image gallery to my blog template project with the codes below:
 

Problem

But the width of the images were changed to fill the whole section unexpectedly.
notion image

Solution

There are two ways to fix that problem:
  1. Add align-self: flex-start to the image items rule
    1. Use Grid instead of FlexBox
        2.  
    notion image

    References

    How TO - Responsive Images
    flexbox下图片排列变形问题？

    © Foy Wan 2022 - 2025