Flexbox Foundamentals

A simple guide for flex-box element concepts and usage!

Start

To use flex-box in your project add this line in css file:

    display: flex;

flex-direction

To set the direction of flex items, use this command:

Horizontal direction(used by defaut):

    flex-direction: row;

Vertical direction:

    flex-direction: column;

Align the item following the opposite axis of flex-direction */

    align-items: center;

Align the item following the same axis of flex-direction */

    justify-content: center;

Examples

See layout examples in examples page.