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:

• 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 item properties

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:

• 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?