First flexbox layout

Flexbox layout, tiling from top to bottom

Flexbox layout, reversed items

Flexbox layout, reversed rows

Flexbox layout, justify-content: space-evenly

Flexing box sizes: items share the free space

Flexing box sizes: items share the free space in 3:2:1 proportion

Image credits: Thanks to Marcel Eberle, Possessed Photography, Tony Hand, David Pisnoy, Anne Nygard, Clem Onojeghuo, Maximalfocus, and Kanan Khasmammadov, all at Unsplash.com, for images used in examples.

This is a demonstration file from Web Design in Easy Steps by Sean McManus.
Back to demo files index.