Flexbox is a new set of rules for positioning child elements within a parent element. You can think of it as a way of predictably laying out items within a container. Flexbox CSS is awesome, but it introduces many new concepts that can make it difficult to use.
Without flexbox, CSS layouts have to be accomplished using various combinations of float, margin, display, text-align, and vertical-align properties (or tables if you’re feeling hipster). This results in some pretty messy and hard-to-predict styles. Flexbox introduces a new set of properties which interact in a clearer, more predictable manner.
This site is built to provide interactive, practical examples of how UI components can be built using flexbox CSS, so you can start using it in your own code right away. The examples start out simple, and get more complex as you go on.
FLEXBOX PATTERNS