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;
}

The Container Items

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

{% embed url="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" %}

{% embed url="https://scrimba.com/learn/flexbox/your-first-flexbox-layout-flexbox-tutorial-canLGCw" %}