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
Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp
Order
Set the order of flex items in a flex container.
Behavior:
- 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