Flexbox and Grid

Flexbox selectors

Flex containers have two axes: a main axis and a cross axis. By default, the main axis is horizontal and the cross axis is vertical.

The main axis is used to position flex items with the following properties:

• justify-content
• flex-wrap
• flex-grow
• flex-shrink

The cross axis is used to position flex items with the following properties:

• align-items
• align-content

• display: flex changes an element to a block-level container with flex items inside of it.
• display: inline-flex allows multiple flex containers to appear inline with each other.
• justify-content is used to space items along the main axis.
• align-items is used to space items along the cross axis.
• flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
• flex-shrink is used to specify how much flex items shrink and in what proportions along the main axis.
• flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.
• flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.
• flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.
• align-content is used to space rows along the cross axis.
• flex-direction is used to specify the main and cross axes.
• flex-flow is used to specify flex-wrap and flex-direction in one declaration.
• Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.

flex-grow / flex-shrink