Edit product

$5

A Field Guide to Flexbox, PDF

This is an immediate PDF copy download of A Field Guide to Flexbox, a 36 page (40 with covers) booklet guide to getting started with CSS Flexbox layout; based on the wildly popular Flexbox Cheatsheet Cheatsheet with a few additional declarations and examples.

This PDF includes a linked outline that can then be accessed throughout the guide via a link per page for easier navigation. 

🍎 🍊 🍇 🍒 🍐 🍓

The guide features redesigned fruit illustrations to communicate fundamental concepts and the impact of different container and item declarations.

A Field Guide to Flexbox serves as an endlessly handy introduction to using flexbox. While it’s not an exhaustive look at using this technology, it’s perfectly suited for those just getting started or for the rest of us that just can’t seem to remember all these options and need a reference to carry around.

For news keep an eye on the site or Twitter. To take a look at some preview images check out the announcement blog post.


Table of Contents

Foundational Concepts.....6

Activate Powers.................9

Container Declarations.....11

    Rows................................12

    Columns...........................13

    Main axis location............14

    Wrapping..........................17

    Cross axis location...........19

    Multi-line alignment...........22

Item Declarations................26

    Order..................................27

    Grow..................................28

    Shrink................................29

    Alignment..........................30

Additional Resources..........34


Layout

The small guide presents common questions regarding layout intentions and responds to different options with properties and values, as well as the visual implications of each choice. There are page numbers on each page next to a section title as a reminder; especially helpful in recalling whether or not a declaration is intended to be placed on a container or item element, for example.

The first and final two pages are reserved for some rad fruit art.


Neat Words of Praise

“I can never remember the flexbox properties, so I’m thrilled to have A Field Guide to Flexbox by my side. Joni’s illustrations are equal parts delightful and easy to follow, making it my new go-to resource.” — Katy DeCorah, web developer

“This handy guide is a wonderful resource, especially for a visual learner, like myself. Joni does a great job of breaking down fundamental concepts into easy to understand (and super cute!) bite sized pieces. If i had a guide like this for all web design concepts I’d be golden.” — Shanise Barona, web developer

“I like the watermelon the best. They are tasty tasty.” — Ben Trythall, 5 years old 

You've purchased this product

See it in your library

View in Library
Sorry, this item is not available in your location.
Sold out, please go back and pick another option.
This product is not currently for sale.
  • Size417 KB
  • Length40 pages

Checkout

A Field Guide to Flexbox, PDF

Enter your info to complete your purchase

Card

···· ···· ···· 4242
Test card

05/18

Card

Use a different card?

Card

pp paypal

or pay with

We do not keep any of your sensitive credit card information on file with us unless you ask us to after this purchase is complete.

or pay with

You'll be charged US$5.

Your purchase was successful!

We charged your card and sent you a receipt

    Gumroad Library

    Download from the App Store or text yourself a link to the app

    Good news! Since you already have a Gumroad account, it's also been added to your library.

    Powered by Gumroad