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

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

PreviousGrid vs FlexboxNextGrid

Last updated