Using Flex Layout

(0a) Display: block

We can have cards with bear images. By default, a figure is a block.

(0b) Display: inline-block

We can override that if we want the bears in a line.

(1a) Flex with Wrapping

With flex we can put them in line, too, and by default they grow to same line size.

(1b) Flex with Growing

The cards can grow in width to fill a line. We can highlight a card by letting it grow more.

(1c) Centred contents

Card contents should be centred.

(2a) Flex Default Align: Stretching

By default, the cards will take whole line height.

(2b) Align Top

(2c) Align Bottom

(2d) Align Centred

(3a) Nested Flex

Cat cards can always have caption at the bottom.

(3b) Nested Flex for Centring

And the picture in the middle.