Even more about how Flexbox works — explained in big, colorful, animated gifs
Scott Domes
2K25

How does this mesh with responsive images? In the pre-flex display days, you would put an image in a parent div, then set a width on the image, perhaps 100% of parent div, and make height:auto, and it would work pretty well to reduce the image proportionately within the layout.

Say I had png images at 800px square in full size. But I want to lay them out in flex rows inside a container that’s perhaps only 600px wide, and I don’t want to have to manually reduce each png.

Can I set the flex-basis of the image div to 300px and let flexbox handle proportionately reducing the images responsively to fit? And if on a narrow device viewport, if the parent flex div shrinks to 400px, will the right flex properties take care of image “shrinking”?

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.