Are you looking for the latest documentation?

Documentation for Acquia Cohesion V6.0 onwards has moved to https://cohesiondocs.acquia.com

    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

    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:

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.