Flex

The .d-flex and the adjacent classes are used to manage layout, alignment and sizing for various elements. Aplying the specified class on a container will transform the direct children elements into flex items. Flex containers and items can be further modified with additional flex properties.

    <div class="d-flex"></div>
    <div class="d-flex"></div>

    <div class="d-inline-flex"></div>
    <div class="d-inline-flex"></div>

Note that the flex class has responsive variations for each breakpoint, available in two flavours, .d-{breakpoint}-flex and .d-{breakpoint}-inline-flex.

Flex direction determines how flex items are arranged within the flex container. There are four directions, organized into two pairs. Horizontally, items are displayed as either .flex-row (the default browser behavior) or .flex-row-reverse.

    <div class="d-flex flex-row">
        <div class="bg">Flex item 1</div>
        <div class="bg">Flex item 2</div>
        <div class="bg">Flex item 3</div>
    </div>
    

    <div class="d-flex flex-row-reverse">
        <div class="bg">Flex item 1</div>
        <div class="bg">Flex item 2</div>
        <div class="bg">Flex item 3</div>
    </div>

Vertically, the options are .flex-column to start the column from the top, or .flex-column-reverse top start the column from the bottom.

    <div class="d-flex flex-column">
        <div class="bg">Flex item 1</div>
        <div class="bg">Flex item 2</div>
        <div class="bg">Flex item 3</div>
    </div>

    <div class="d-flex flex-column-reverse">
        <div class="bg">Flex item 1</div>
        <div class="bg">Flex item 2</div>
        <div class="bg">Flex item 3</div>
    </div>

All the above-mentioned classes also have responsive variations: .flex-{breakpoint}-row, .flex-{breakpoint}-row-reverse, .flex-{breakpoint}-column and .flex-{breakpoint}-column-reverse.

The .justify-content-* class is used to change the alignment of the flex items on the main axis (the x-axis by default or for elements within a .flex-row container, or the y-axis for elements within a .flex-column container). There are 6 possible values: start (browser default), end, center, between, around and evenly.

<div class="d-flex justify-content-start"></div>

<div class="d-flex justify-content-end"></div>

<div class="d-flex justify-content-center"></div>

<div class="d-flex justify-content-between"></div>

<div class="d-flex justify-content-around"></div>

<div class="d-flex justify-content-evenly"></div>

All the above-mentioned classes have responsive variations, denoted by syntax .justify-content-{breakpoint}-*.

The .align-items-* class is used to change the alignment of the flex items on the main axis (the y-axis by default, and x-axis if the flex container is of type .flex-column-*). There are 5 values: start, end, center, baseline, stretch (browser default).

<div class="d-flex align-items-start"></div>

<div class="d-flex align-items-end"></div>

<div class="d-flex align-items-center"></div>

<div class="d-flex align-items-baseline"></div>

<div class="d-flex align-items-stretch"></div>

All the above-mentioned classes have responsive variations, denoted by .align-items-{breakpoint}-*.

The .align-self-* class is used to individually change the alignment of a certain flex item on the main axis (the y-axis by default, and x-axis if the flex container is of type .flex-column-*). There are 5 values, just as for the align property: start, end, center, baseline, stretch (browser default).

    <div class="d-flex">
        <div class="align-self-start"></div>
        <div class="align-self-center"></div>
        <div class="align-self-end"></div>
    </div>

All the above-mentioned classes have responsive variations, denoted by .align-self-{breakpoint}-*.

The .align-content-* class is used to align flex items together (as a block) on the main axis (the y-axis by default, and x-axis if the flex container is of type .flex-column-*). There are 5 values: start, end, center, baseline, stretch (browser default).

Note that this property has no effect on single rows of flex items.

<div class="d-flex  align-content-start flex-wrap"></div>

<div class="d-flex  align-content-center flex-wrap"></div>

<div class="d-flex  align-content-between flex-wrap"></div>

All the above-mentioned classes have responsive variations, denoted by .align-content-{breakpoint}-*.

The .flex-fill class is used is used on one or multiple siblings to force them to take up all the available horizontal space within the the flex container. All siblings with the .flex-fill class will have the same width.

    <div class="d-flex">
        <div class="bg">Flex item</div>
        <div class="bg flex-fill">Flex fill item</div>
        <div class="bg">Flex item</div>
    </div>

    <div class="d-flex">
        <div class="bg flex-fill">Flex fill item</div>
        <div class="bg flex-fill">Flex fill item</div>
        <div class="bg flex-fill">Flex fill item</div>
    </div>

The .flex-fill class has responsive variations, denoted by .flex-{breakpoint}-fill.

The .flex-wrap class is used to change how the flex items wrap within the flex container. There are three values:

• .flex-nowrap which does not allow the items to wrap; As a concequence, the siblings will split the available space evenly; This is the browser's default
• .flex-wrap which allows the items to wrap in their natural order
• .flex-wrap which allows the items to wrap in reverse order

Note that in the below example, each item is defined with a width of 50%. As the flex-container has class .flex-nowrap, the flex items will split the horizontal space evenly, resulting in a 33% width instead of the intended 50%.

    <div class="d-flex flex-nowrap justify-content-center">
        <div class="w-50">Flex item 1</div>
        <div class="w-50">Flex item 2</div>
        <div class="w-50">Flex item 3</div>
    </div>

Note that in the below example, each item is defined with a width of 50%. As the flex-container has class .flex-wrap, the flex items will wrap on the second row, each getting 50%. The centered alignment of the third sibling is given by the .justify-content-center class.

    <div class="d-flex flex-wrap justify-content-center">
        <div class="w-50">Flex item 1</div>
        <div class="w-50">Flex item 2</div>
        <div class="w-50">Flex item 3</div>
    </div>

Note that in the below example, each item is defined with a width of 50%. As the flex-container has class .flex-wrap-reverse, the flex items will wrap on the second row in reverse order, each getting 50%. The centered alignment of the third sibling (now situated on the first row) is given by the .justify-content-center class.

    <div class="d-flex flex-wrap-reverse justify-content-center">
        <div class="w-50">Flex item 1</div>
        <div class="w-50">Flex item 2</div>
        <div class="w-50">Flex item 3</div>
    </div>

All of the three classes mentioned, .flex-nowrap, .flex-wrap and .flex-wrap-reverse have their responsive variations, denoted by .flex-{breakpoint}-nowrap, .flex-{breakpoint}-wrap and .flex-{breakpoint}-wrap-reverse respectively.

The .order-* class is used to specify a pre-defined order of the flex items. There is a set of 6 pre-defined values, which can be easily extended with additional values if needed.

    <div class="d-flex">
        <div class="order-3">Flex item 1</div>
        <div class="order-2">Flex item 2</div>
        <div class="order-1">Flex item 3</div>
    </div>

The .order-* classes have responsive variations, denoted by .order-{breakpoint}-*. Additionally, there are the .order-first and .order-last classes that change the order of an element by applying order -1 and 6 respectively. These have responsive variations as well.

There are multiple ways of centering content in Haze. One of them is using the .flex-center class and makes use of the display: flex, align-items:center and justify-content: center properties and does not have any further requriements.

    <div class="position-relative rounded-5 flex-center bg">
        <div class=class="bg-alt rounded-5 p-4 m-2"></div>
        <div class=class="bg-alt rounded-5 p-4 m-2"></div>
        <div class=class="bg-alt rounded-5 p-4 m-2"></div>
    </div>

The .flex-center class offers a condensed version of the declaration, providing the same properties and achieving identical results as .d-flex .align-items-center .justify-content-center.

    <div class="position-relative rounded-5 d-flex align-items-center justify-content-center bg">
        <div class=class="bg-alt rounded-5 p-4 m-2"></div>
        <div class=class="bg-alt rounded-5 p-4 m-2"></div>
        <div class=class="bg-alt rounded-5 p-4 m-2"></div>
    </div>

There is an alternate method that makes use of the position utilities; More information will be provided in the Utilities/ Position section.

This functionality has been marked as deprecated starting from Haze 1.0.1 and is slated for removal in Haze 1.1.0 due to its infrequent usage. Any functionalities relying on the adjacent classes .flex-grow-* or .flex-shrink-* can be substituted by explicitly declaring .flex-fill on the necessary flex items.

The .flex-grow-* class is used to toggle a flex item's ability to grow to fill the available space. For instance, in the below example, the .flex-grow-1 element used all the available space, while allowing the remaining two items their necessary space.

    <div class="d-flex">
        <div class="bg flex-grow-1">
            Flex item
        </div>
        <div class="bg">Flex item</div>
        <div class="bg">Flex item</div>
    </div>

The .flex-shrink-* class is used to toggle a flex item's ability to shrink in order to let other siblings fill the available space. For instance, in the below example, the .flex-shrink-1 element wraps to a new row, while allowing the remaining two items their necessary space.

    <div class="d-flex">
        <div class="bg w-100">Flex item</div>
        <div class="bg w-100">Flex item</div>
        <div class="bg flex-shrink-1">
            Flex item
        </div>
    </div>

The .order-* classes have responsive variations, denoted by .order-{breakpoint}-*. Additionally, there are the .order-first and .order-last classes that change the order of an element by applying order -1 and 6 respectively. These have responsive variations as well.