Flex container properties
Set the properties of a Flex container.
To turn an element into a Flex container, set the display property to flex or inline-flex. All direct children of the element will now become flex-items.
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'
- 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.
'align-content' controls the cross-axis (vertical direction if the flex-direction is row, and horizontal if the flex-direction is column) positioning of multiple lines relative to each other. (Think lines of a paragraph being vertically spread out, stacked toward the top, stacked toward the bottom. This is under a flex-direction row paradigm).
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.
'align-items' controls the cross-axis of an individual line of flex elements. (Think how an individual line of a paragraph is aligned, if it contains some normal text and some taller text. In that case, will it be the bottom, top, or center of each type of text in a line that will be aligned?)
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:
