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

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”?