List of tricks to help implement the flexbox features in a world where it does not exist.

Create a fun way solutions that can help to implement the with progressive enhancement and learning and testing new technologies.

See the Awesome Flexbox project.

Basic

• No javascript.
• No css pre-processors.
• No css post-processors.
• We will create our tricks in two modes: Apocalypse Zombie and Revelation Robots.

Apocalypse Zombie rules:

• Use only properties with support equal to or less than the flexbox.

Revelation Robots rules:

• Be happy with variables, grid layout and what you want ;D

Properties for the Parent.

• display flex | inline-flex
• flex-direction: row | row-reverse | column | column-reverse
• flex-wrap: nowrap | wrap | wrap-reverse
• flex-flow: shorthand
• justify-content: flex-start | flex-end | center | space-between | space-around
• align-items: flex-start | flex-end | center | baseline | stretch
• align-content: flex-start | flex-end | center | space-between | space-around | stretch

Properties for the Children.

• order: integer
• flex-grow: number
• flex-shrink: number
• flex-basis: length | auto
• flex: shorthand
• align-self: auto | flex-start | flex-end | center | baseline | stretch

See the project roadmap and follow these recommendations.

MIT License © Afonso Pacifer