Awesome
List of tricks to help implement the flexbox features in a world where it does not exist.
What is the purpose of this project?
Create a fun way solutions that can help to implement the with progressive enhancement and learning and testing new technologies.
Not know flexbox?
See the Awesome Flexbox project.
Rules
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
Flex container
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
Flex items
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
Contributing
See the project roadmap and follow these recommendations.