Version:

    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:

    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.