Guía rápida - CSS Flexbox

CSS Diplay Flex

Flex Container

• display: flex | inline-flex
• flex-direction: row | row-reverse | column | column-reverse
• flex-wrap: nowrap | wrap | wrap-reverse
• 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

• order: { index: Number }
• flex: { flex-grow: Number } { flex-shrink: Number } { flex-basis } Urls to: flex-grow, flex-shrink, and flex-basis.
• align-self: auto | flex-start | flex-end | center | baseline | stretch

Justify-content

Resources

• CSS Tricks flexbox
• Visual example
• Grid vs flexbox
• Bocoup - Dive into Flexbox
• Flexy Boxes
• Old flexbox and new flexbox - Differences in spec 2009 and 2011. There are a lot of articles out there explaining the old spec.
• Can I Use - Flexbox - Current status of browser support for flexbox properties. IE 11, Firefox 28.0, Chrome 29.0, Opera 17.0, Android Browser 4.4.
• "The Ultimate Flexbox Cheatsheet"