Flexbox

An introduction to Flexbox

The flex layout consists of parent container referred as flex container and its immediate children which are called flex items.

The Container

To create a flex container, just set the display property to flex. All of its immediate children will now be considered flex items.

.flex-container {
    display: flex;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The Container Items

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Container properties

• flex-direction - specifies flow of the flex items

• flex-wrap - specifies whether the flex items should wrap if necessary and how

• justify-content - aligns flex items along main axis of container distributing free space among the items.

• align-items - align flex items in the cross-axis direction.

Flex Item properties

• order - the order of the item within the children (default to position in HTML)

• flex-grow - how much the flex item will grow in relation to other items when positive free space is distributed.

• flex-shrink - how much the flex item will shrink in relation to other items when negative free space is distributed.

Resources

A Complete Guide to Flexbox | CSS-TricksCSS-Tricks

Your first Flexbox layout - Flexbox tutorial - Scrimba.comScrimba