Cheatsheet: Flexbox Cards

Getting Started with Flexbox

The Mozilla Developer Network (MDN) has great resources for getting started with Flexobox:

• Learning Flexbox
• Test your skills: Flexbox
• Guides: CSS Flexible Box Layout

Additionally, CSS Tricks has excellent resources:

• Complete Guide to Flexbox
• Common values for the flex property

And these learning games will help you put code to screen:

• Flexbox Froggy
• Flexbox Zombies

Card Pattern

A quick search for “ux card pattern” will give you countless articles/videos to get you up to speed on the card pattern (a popular use for flexbox).

The Flexbox Patterns website has many useful patterns that come in handy when using Flexbox. For cards:

• Card
• Card Group
• Comment Post

Tony’s Sample code: Puppy card

See the Pen Puppy Card by Tony Grimes (@browsertherapy) on CodePen.

Sandbox environments: Codepen.io is a handy tool (one of many) that helps you code directly in the browser.

Tony’s Sample code: Row (1 x 3) of basic flex cards

See the Pen Responsive Card Pattern: 1 x 3 by Tony Grimes (@browsertherapy) on CodePen.

Tony’s Sample Code: Flex grow, shrink and basis

See the Pen Flexbox demo: grow, shrink and basis by Tony Grimes (@browsertherapy) on CodePen.

Popular Tutorials

Kevin Powell has many great tutorials on Flexbox, these are just two you should check out:

• Playlist: Flexbox Basics
• Advanced: Container queries