Flex basis is the size of flex items before they are placed into a flex container. It’s the ideal size of the items
If no flex-basis is specified, then the flex-basis falls back to the item’s width property
Enter a number or percentage to specify the initial length
Enter auto to set the item to the length of the flex item, If no length is specified, this will be the length of its content
Expected value:
Enter a number, percentage or keyword.
Accepted units:
You can leave blank or specify a unit to be used.
blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
px - The value will be applied in pixels
% - The value will be applied as a percentage of the parent elements width
The order of the flex item within the flex container can be changed using a positive or negative number
The order is only a visual display. It does not effect the order in the document or tab order.
Expected value:
Enter a number
Decimal numbers are accepted
Accepted units:
You can leave blank.
blank - Just add a number
Flex grow
Set the flex grow factor of a flex item.
Behavior:
The flex-grow property will increase or decrease the size of a flex item in relation to its sibling flex items
Expected value:
Enter a number
Decimal numbers are accepted
Accepted units:
You can leave blank.
blank - Just add a number
Flex shrink
Set the flex shrink factor of a flex item.
Behavior:
The flex-shrink property will shrink items to fill the container according to the flex-shrink number.
Expected value:
Enter a number
Decimal numbers are accepted
Accepted units:
You can leave blank.
blank - Just add a number
Align self
The align-self property aligns flex items of the current flex line, overriding the align-items value.
Options and behavior:
Start - Place the items at the start
End - Place the items at the end
Flex-start - Place the items at the start with the cross-start margin edge of the flex item flushed with the cross-start edge of the line
Flex-end - Place the items at the end with the cross-end margin edge of the flex item flushed with the cross-end edge of the line.
Centre - Place the flex item's margin box to 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
Auto - Set to the parent's align-items value
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 - Align the items to be flush with the edge of the container corresponding to the item's start side in the cross axis
Self-end - Aligns the items to be flush with the edge of the container corresponding to the item's end side in the cross axis
Baseline - Aligns the items so that their baselines are all aligned
First baseline -
Last baseline -
Stretch - If the items combined size is less than the overall container width along the cross axis, 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.
Useful resources
For more information on Flex box, see these useful resources:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Flex item properties
Set the properties of a flex-item.
Flex basis
Set the initial length of a flex item.
Behavior:
Flex basis is the size of flex items before they are placed into a flex container. It’s the ideal size of the items
If no flex-basis is specified, then the flex-basis falls back to the item’s width property
Enter a number or percentage to specify the initial length
Enter auto to set the item to the length of the flex item, If no length is specified, this will be the length of its content
Expected value:
Enter a number, percentage or keyword.
Accepted units:
You can leave blank or specify a unit to be used.
blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
px - The value will be applied in pixels
- The value will be applied as a percentage of the parent elements width
The order of the flex item within the flex container can be changed using a positive or negative number
The order is only a visual display. It does not effect the order in the document or tab order.
Expected value:
Enter a number
Decimal numbers are accepted
Accepted units:
You can leave blank.
blank - Just add a number
Flex grow
Set the flex grow factor of a flex item.
Behavior:
The flex-grow property will increase or decrease the size of a flex item in relation to its sibling flex items
Expected value:
Enter a number
Decimal numbers are accepted
Accepted units:
You can leave blank.
blank - Just add a number
Flex shrink
Set the flex shrink factor of a flex item.
Behavior:
The flex-shrink property will shrink items to fill the container according to the flex-shrink number.
Expected value:
Enter a number
Decimal numbers are accepted
Accepted units:
You can leave blank.
blank - Just add a number
Align self
The align-self property aligns flex items of the current flex line, overriding the align-items value.
Options and behavior:
Start - Place the items at the start
End - Place the items at the end
Flex-start - Place the items at the start with the cross-start margin edge of the flex item flushed with the cross-start edge of the line
Flex-end - Place the items at the end with the cross-end margin edge of the flex item flushed with the cross-end edge of the line.
Centre - Place the flex item's margin box to 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
Auto - Set to the parent's align-items value
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 - Align the items to be flush with the edge of the container corresponding to the item's start side in the cross axis
Self-end - Aligns the items to be flush with the edge of the container corresponding to the item's end side in the cross axis
Baseline - Aligns the items so that their baselines are all aligned
First baseline -
Last baseline -
Stretch - If the items combined size is less than the overall container width along the cross axis, 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.
Useful resources
For more information on Flex box, see these useful resources:
Site Studio