Set the properties of a Flex container.

Flex direction

Set the direction flex items are placed within the Flex container.

Options and behavior:

• Row (default) - Set items to left to right in (ltr) right to left in (rtl)
• Row-reverse - Set items to right to left in (ltr) left to right in (rtl)
• Column - Set items to top to bottom
• Column-reverse - Set items to bottom to top.

Flex wrap

Set how the flex items should wrap.

Options and behavior:

• Nowrap (defaut) - All items will be on one line
• Wrap - Items will wrap onto multiple lines from top to bottom
• Wrap-reverse - Items will wrap onto multiple lines from bottom to top.

Justify content

Set the alignment of flex items along the main axis (Set in flex direction).

Options and behavior:

• Start - Items are placed flush to each other toward the start edge of the container in the main axis
• End - Items are placed flush to each other toward the end edge of the container in the main axis
• Flex-start (default) - Items are placed flush to each other toward the edge of the container depending on the flex container's main-start side. Only applies to flex-items
• Flex-end - Items are placed flush to each other toward the edge of the container depending on the flex container's main-end side. This only applies to flex-items
• Centre - The items are placed flush to each other toward the center of the container along the main axis.
• Left - Items are placed flush to each other toward the left edge of the container. If the property’s axis is not parallel with the inline axis, this value behaves like 'start' 
• Right - Items are placed flush to each other toward the right edge of the container. If the property’s axis is not parallel with the inline axis, this value behaves like 'start'
• Normal - Items are placed in their default position as if no 'justify-content' value was set
• Baseline - Items are aligned such as their baselines align
• First baseline -  Items are aligned such as their first baselines align
• Last baseline -  Items are aligned such as their last baselines align
• Space-between - Items are evenly distributed along the main axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge
• Space-around - Items are evenly distributed along the main axis. The space before the first item and after the last item is half the space between each item
• Space-evenly - Items are evenly distributed along the main axis. The space before the first item, the space between each item and the space after the last item is exactly the same
• Stretch - If the items combined width is less than the overall container width, any auto-sized items will stretch equally to fill the available space. Max-height and max-width is honored
• Safe - If the size of the item overflows the container, the item is instead aligned as if it  used 'start'
• If the size of the items overflow the container, their width is honored.

Align content

Set the space distributed between and around content items along the cross-axis of their container.

Options and behavior:

• Start - Items are placed flush to each other toward the start edge of the container in the cross axis
• End - Items are placed flush to each other toward the end edge of the container in the cross axis
• Flex-start - Items are placed flush to each other toward the edge of the container depending on the flex container's cross-start side. Only applies to flex-items
• Flex-end -  Items are placed flush to each other toward the edge of the container depending on the flex container's cross-end side. This only applies to flex-items
• Centre - The items are placed flush to each other toward the center of the container along the cross axis.
• Normal - Items are placed in their default position as if no 'align-content' value was set
• First baseline -  Items are aligned such as their first baselines align
• Last baseline -  Items are aligned such as their last baselines align
• Space-between - Items are evenly distributed along the main axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge
• Space-between - Items are evenly distributed along the cross axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge
• Space-around - Items are evenly distributed along the cross axis. The space before the first item and after the last item is half the space between each item
• Space-evenly - Items are evenly distributed along the cross axis. The space before the first item, the space between each item and the space after the last item is exactly the same
• Stretch - If the items combined width is less than the overall container width, any auto-sized items will stretch equally to fill the available space. Max-height and max-width is honored
• Safe - If the size of the item overflows the container, the item is instead aligned as if it  used 'start'
• Unsafe - If the size of the items overflow the container, their width is honored.

Align items

Set the space distributed between and around content items along the cross-axis of their container.

Options and behavior:

• Start - Item are placed flush to each other toward the start edge of the container in the appropriate axis
• End - Item are placed flush to each other toward the end edge of the container in the appropriate axis
• Flex-start - The flex item cross-start margin edge is flushed with the cross-start edge of the line
• Flex-end - Flex item's cross-end margin edge is flushed with the cross-start edge of the line
• Centre -  Flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions
• Normal - Meaning of keyword changes depending on the layout type:
  • In absolutely-positioned layouts, the keyword behaves like start on "replaced" absolutely-positioned boxes, and as stretch on "all" other absolutely-positioned boxes
  • In static position of absolutely-positioned layouts, the keyword behaves as stretch
  • For flex items, the keyword behaves as stretch
  • The property doesn't apply to block-level boxes, and to table cells
• Self-start - Items are placed flush to the edge of the container of the start side of the item, in the appropriate axis
• Self-end - Items are placed flush to the edge of the container of the end side of the item, in the appropriate axis
• Baseline - All flex items are aligned so their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line
• First baseline
• Last baseline
• Stretch -  Items are stretched so the cross-size of the item's margin box is the same as the line while respecting width and height constraints
• Safe - If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start
• Unsafe - The alignment value is honored, regardless of the relative sizes of the item and alignment container.

Useful resources

For more information on Flex box, see these useful resources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• How do I use flexbox to layout my content?

Flex container properties

Flex wrap

Set how the flex items should wrap.

Options and behavior:

• Nowrap (defaut) - All items will be on one line
• Wrap - Items will wrap onto multiple lines from top to bottom
• Wrap-reverse - Items will wrap onto multiple lines from bottom to top.

Justify content

Set the alignment of flex items along the main axis (Set in flex direction).

Options and behavior:

• Start - Items are placed flush to each other toward the start edge of the container in the main axis
• End - Items are placed flush to each other toward the end edge of the container in the main axis
• Flex-start (default) - Items are placed flush to each other toward the edge of the container depending on the flex container's main-start side. Only applies to flex-items
• Flex-end - Items are placed flush to each other toward the edge of the container depending on the flex container's main-end side. This only applies to flex-items
• Centre - The items are placed flush to each other toward the center of the container along the main axis.
• Left - Items are placed flush to each other toward the left edge of the container. If the property’s axis is not parallel with the inline axis, this value behaves like 'start' 
• Right - Items are placed flush to each other toward the right edge of the container. If the property’s axis is not parallel with the inline axis, this value behaves like 'start'
• Normal - Items are placed in their default position as if no 'justify-content' value was set
• Baseline - Items are aligned such as their baselines align
• First baseline -  Items are aligned such as their first baselines align
• Last baseline -  Items are aligned such as their last baselines align
• Space-between - Items are evenly distributed along the main axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge
• Space-around - Items are evenly distributed along the main axis. The space before the first item and after the last item is half the space between each item
• Space-evenly - Items are evenly distributed along the main axis. The space before the first item, the space between each item and the space after the last item is exactly the same
• Stretch - If the items combined width is less than the overall container width, any auto-sized items will stretch equally to fill the available space. Max-height and max-width is honored
• Safe - If the size of the item overflows the container, the item is instead aligned as if it  used 'start'
• Unsafe - If the size of the items overflow the container, their width is honored.

Align content

Set the space distributed between and around content items along the cross-axis of their container.

Options and behavior:

• Start - Items are placed flush to each other toward the start edge of the container in the cross axis
• End - Items are placed flush to each other toward the end edge of the container in the cross axis
• Flex-start - Items are placed flush to each other toward the edge of the container depending on the flex container's cross-start side. Only applies to flex-items
• Flex-end -  Items are placed flush to each other toward the edge of the container depending on the flex container's cross-end side. This only applies to flex-items
• Centre - The items are placed flush to each other toward the center of the container along the cross axis.
• Normal - Items are placed in their default position as if no 'align-content' value was set
• First baseline -  Items are aligned such as their first baselines align
• Last baseline -  Items are aligned such as their last baselines align
• Space-between - Items are evenly distributed along the main axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge
• Space-between - Items are evenly distributed along the cross axis. The first item is flush with the container main-start edge and the last item is flush with the container main-end edge
• Space-around - Items are evenly distributed along the cross axis. The space before the first item and after the last item is half the space between each item
• Space-evenly - Items are evenly distributed along the cross axis. The space before the first item, the space between each item and the space after the last item is exactly the same
• Stretch - If the items combined width is less than the overall container width, any auto-sized items will stretch equally to fill the available space. Max-height and max-width is honored
• Safe - If the size of the item overflows the container, the item is instead aligned as if it  used 'start'
• Unsafe - If the size of the items overflow the container, their width is honored.

Align items

Set the space distributed between and around content items along the cross-axis of their container.

Options and behavior:

• Start - Item are placed flush to each other toward the start edge of the container in the appropriate axis
• End - Item are placed flush to each other toward the end edge of the container in the appropriate axis
• Flex-start - The flex item cross-start margin edge is flushed with the cross-start edge of the line
• Flex-end - Flex item's cross-end margin edge is flushed with the cross-start edge of the line
• Centre -  Flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions
• Normal - Meaning of keyword changes depending on the layout type:
  • In absolutely-positioned layouts, the keyword behaves like start on "replaced" absolutely-positioned boxes, and as stretch on "all" other absolutely-positioned boxes
  • In static position of absolutely-positioned layouts, the keyword behaves as stretch
  • For flex items, the keyword behaves as stretch
  • The property doesn't apply to block-level boxes, and to table cells
• Self-start - Items are placed flush to the edge of the container of the start side of the item, in the appropriate axis
• Self-end - Items are placed flush to the edge of the container of the end side of the item, in the appropriate axis
• Baseline - All flex items are aligned so their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line
• First baseline
• Last baseline
• Stretch -  Items are stretched so the cross-size of the item's margin box is the same as the line while respecting width and height constraints
• Safe - If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start
• Unsafe - The alignment value is honored, regardless of the relative sizes of the item and alignment container.

Useful resources

For more information on Flex box, see these useful resources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• How do I use flexbox to layout my content?