/
  • Utilities
  • /
  • Flexbox
  • FlexBox

    Easily manage the layout of your components with the responsive FlexBox utilities. If you require a utility to manage the layout of your application, refer to the Grid System instead.

    Flex Container

    An element can configured as a flexbox container using the p-d-flex or p-d-inline-flex classes.

    
    <div class="p-d-flex">Flex Container</div>
    <div class="p-d-inline-flex">Inline Flex Container</div>
    
    
    Flex Container
    Inline Flex Container
    Direction

    Default is applied using the p-flex-{direction} class where direction can be either of the following.

    • row (default)
    • row-reverse
    • column
    • column-reverse
    Row
    
    <div class="p-d-flex">
        <div class="p-mr-2">Item 1</div>
        <div class="p-mr-2">Item 2</div>
        <div>Item 3</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Column
    
    <div class="p-d-flex p-flex-column">
        <div class="p-mb-2">Item 1</div>
        <div class="p-mb-2">Item 2</div>
        <div>Item 3</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Responsive

    Row direction for larger screens and column for smaller.

    
    <div class="p-d-flex p-flex-column p-flex-md-row">
        <div class="p-mb-2 p-mr-2">Item 1</div>
        <div class="p-mb-2 p-mr-2">Item 2</div>
        <div class="p-mb-2 p-mr-2">Item 3</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Direction Classes
    • p-flex-row
    • p-flex-row-reverse
    • p-flex-column
    • p-flex-column-reverse
    • p-flex-sm-row
    • p-flex-sm-row-reverse
    • p-flex-sm-column
    • p-flex-sm-column-reverse
    • p-flex-md-row
    • p-flex-md-row-reverse
    • p-flex-md-column
    • p-flex-md-column-reverse
    • p-flex-lg-row
    • p-flex-lg-row-reverse
    • p-flex-lg-column
    • p-flex-lg-column-reverse
    • p-flex-xl-row
    • p-flex-xl-row-reverse
    • p-flex-xl-column
    • p-flex-xl-column-reverse
    Order

    Order configures the way in which they appear in the flex container. p-order-{value} format is used where value can be a number from 0 to 6.

    Customized
    
    <div class="p-d-flex">
        <div class="p-mr-2 p-order-3">Item 1</div>
        <div class="p-mr-2 p-order-1">Item 2</div>
        <div class="p-mr-2 p-order-2">Item 3</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Responsive

    Orders change depending on the screen size.

    
    <div class="p-d-flex">
        <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
        <div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
        <div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Order Classes
    • p-order-0
    • p-order-1
    • p-order-2
    • p-order-3
    • p-order-4
    • p-order-5
    • p-order-6
    • p-order-sm-0
    • p-order-sm-1
    • p-order-sm-2
    • p-order-sm-3
    • p-order-sm-4
    • p-order-sm-5
    • p-order-sm-6
    • p-order-md-0
    • p-order-md-1
    • p-order-md-2
    • p-order-md-3
    • p-order-md-4
    • p-order-md-5
    • p-order-md-6
    • p-order-lg-0
    • p-order-lg-1
    • p-order-lg-2
    • p-order-lg-3
    • p-order-lg-4
    • p-order-lg-5
    • p-order-lg-6
    • p-order-xl-0
    • p-order-xl-1
    • p-order-xl-2
    • p-order-xl-3
    • p-order-xl-4
    • p-order-xl-5
    • p-order-xl-6
    Wrap

    Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is p-flex-{value} and the value field can be either of the listed alternatives.

    • nowrap (default)
    • wrap
    • wrap-reverse
    No Wrap
    
    <div class="p-d-flex">
        <div class="p-mr-2 p-mb-2">Item 1</div>
        <div class="p-mr-2 p-mb-2">Item 2</div>
        <div class="p-mr-2 p-mb-2">Item 3</div>
        <div class="p-mr-2 p-mb-2">Item 4</div>
        <div class="p-mr-2 p-mb-2">Item 5</div>
        <div class="p-mr-2 p-mb-2">Item 6</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Wrap
    
    <div class="p-d-flex p-flex-wrap">
        <div class="p-mr-2 p-mb-2">Item 1</div>
        <div class="p-mr-2 p-mb-2">Item 2</div>
        <div class="p-mr-2 p-mb-2">Item 3</div>
        <div class="p-mr-2 p-mb-2">Item 4</div>
        <div class="p-mr-2 p-mb-2">Item 5</div>
        <div class="p-mr-2 p-mb-2">Item 6</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Wrap Reverse
    
    <div class="p-d-flex p-flex-wrap-reverse">
        <div class="p-mr-2 p-mb-2">Item 1</div>
        <div class="p-mr-2 p-mb-2">Item 2</div>
        <div class="p-mr-2 p-mb-2">Item 3</div>
        <div class="p-mr-2 p-mb-2">Item 4</div>
        <div class="p-mr-2 p-mb-2">Item 5</div>
        <div class="p-mr-2 p-mb-2">Item 6</div>
    </div>
    
    
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Wrap Classes
    • p-flex-nowrap
    • p-flex-wrap
    • p-flex-wrap-reverse
    • p-flex-sm-nowrap
    • p-flex-sm-wrap
    • p-flex-sm-wrap-reverse
    • p-flex-md-nowrap
    • p-flex-md-wrap
    • p-flex-md-wrap-reverse
    • p-flex-lg-nowrap
    • p-flex-lg-wrap
    • p-flex-lg-wrap-reverse
    • p-flex-xl-nowrap
    • p-flex-xl-wrap
    • p-flex-xl-wrap-reverse
    Justify Content

    Justify content is the alignment along the main axis and defined using the p-jc-{value} format with responsive alternatives. Value field accepts the options below.

    • start
    • end
    • center
    • between
    • around
    • evenly
    Between
    
    <div class="p-d-flex p-jc-between">
        <div>Item 1</div>
        <div>Item 2</div>
    </div>
    
    
    Item 1
    Item 2
    Center
    
    <div class="p-d-flex p-jc-center">
        <div class="p-mr-2">Item 1</div>
        <div>Item 2</div>
    </div>
    
    
    Item 1
    Item 2
    Justify Content Classes
    • p-jc-start
    • p-jc-end
    • p-jc-center
    • p-jc-between
    • p-jc-around
    • p-jc-evenly
    • p-jc-sm-start
    • p-jc-sm-end
    • p-jc-sm-center
    • p-jc-sm-between
    • p-jc-sm-around
    • p-jc-sm-evenly
    • p-jc-md-start
    • p-jc-md-end
    • p-jc-md-center
    • p-jc-md-between
    • p-jc-md-around
    • p-jc-md-evenly
    • p-jc-lg-start
    • p-jc-lg-end
    • p-jc-lg-center
    • p-jc-lg-between
    • p-jc-lg-around
    • p-jc-lg-evenly
    • p-jc-xl-start
    • p-jc-xl-end
    • p-jc-xl-center
    • p-jc-xl-between
    • p-jc-xl-around
    • p-jc-xl-evenly
    Align Items

    Align Items configuration is the alignment along the cross axis and defined using the p-ai-{value} format with responsive alternatives. Value field accepts the options below.

    • start
    • end
    • center
    • baseline
    • stretch (default)
    Start
    
    <div class="p-d-flex p-ai-start">
        <div class="p-mr-2" style="height:100px">Item 1</div>
        <div style="height:50px">Item 2</div>
    </div>
    
    
    Item 1
    Item 2
    Center
    
    <div class="p-d-flex p-ai-center">
        <div class="p-mr-2" style="height:100px">Item 1</div>
        <div style="height:50px">Item 2</div>
    </div>
    
    
    Item 1
    Item 2
    Align Items Classes
    • p-ai-start
    • p-ai-end
    • p-ai-center
    • p-ai-baseline
    • p-ai-strech
    • p-ai-sm-start
    • p-ai-sm-end
    • p-ai-sm-center
    • p-ai-sm-baseline
    • p-ai-sm-strech
    • p-ai-md-start
    • p-ai-md-end
    • p-ai-md-center
    • p-ai-md-baseline
    • p-ai-md-strech
    • p-ai-lg-start
    • p-ai-lg-end
    • p-ai-lg-center
    • p-ai-lg-baseline
    • p-ai-lg-strech
    • p-ai-xl-start
    • p-ai-xl-end
    • p-ai-xl-center
    • p-ai-xl-baseline
    • p-ai-xl-strech
    Align Self

    Align self configuration is the alignment along the cross axis for a particular element and defined using the p-as-{value} format with responsive alternatives. Value field accepts the options below.

    • start
    • end
    • center
    • baseline
    • stretch (default)
    
    <div class="p-d-flex" style="height: 150px;">
        <div class="p-mr-2 p-as-start">Start</div>
        <div class="p-mr-2 p-as-center">Center</div>
        <div class="p-mr-2 p-as-end">End</div>
        <div class="p-mr-2 p-as-stretch">Stretch</div>
    </div>
    
    
    Start
    Center
    End
    Stretch
    Align Items Classes
    • p-as-start
    • p-as-end
    • p-as-center
    • p-as-baseline
    • p-as-strech
    • p-as-sm-start
    • p-as-sm-end
    • p-as-sm-center
    • p-as-sm-baseline
    • p-as-sm-strech
    • p-as-md-start
    • p-as-md-end
    • p-as-md-center
    • p-as-md-baseline
    • p-as-md-strech
    • p-as-lg-start
    • p-as-lg-end
    • p-as-lg-center
    • p-as-lg-baseline
    • p-as-lg-strech
    • p-as-xl-start
    • p-as-xl-end
    • p-as-xl-center
    • p-as-xl-baseline
    • p-as-xl-strech
    Align Content

    Align content is the alignment along the cross axis and defined using the p-ac-{value} format with responsive alternatives. Value field accepts the options below.

    • start
    • end
    • center
    • around
    • stretch
    • between
    Align Content Classes
    • p-ac-start
    • p-ac-end
    • p-ac-center
    • p-ac-around
    • p-ac-stretch
    • p-ac-between
    • p-ac-sm-start
    • p-ac-sm-end
    • p-ac-sm-center
    • p-ac-sm-around
    • p-ac-sm-stretch
    • p-ac-sm-between
    • p-ac-md-start
    • p-ac-md-end
    • p-ac-md-center
    • p-ac-md-around
    • p-ac-md-stretch
    • p-ac-md-between
    • p-ac-lg-start
    • p-ac-lg-end
    • p-ac-lg-center
    • p-ac-lg-around
    • p-ac-lg-stretch
    • p-ac-lg-between
    • p-ac-xl-start
    • p-ac-xl-end
    • p-ac-xl-center
    • p-ac-xl-around
    • p-ac-xl-stretch
    • p-ac-xl-between
    Margin with FlexBox

    When combined with spacing utilities, flexbox offers endless possibilities.

    Horizontal Spacing
    
    <div class="p-d-flex p-p-3 card">
        <p:button icon="pi pi-check" styleClass="p-mr-2" />
        <p:button icon="pi pi-trash" styleClass="ui-button-danger"/>
        <p:button icon="pi pi-search" styleClass="p-ml-auto ui-button-help"/>
    </div>
    
    
    Vertical Spacing
    
    <div class="p-d-flex p-flex-column" style="height:150px">
        <div>Item 1</div>
        <div class="p-mt-auto">Item 2</div>
    </div>
    
    
    Item 1
    Item 2

    Theme Customization

    Babylon offers different themes for layout, topbar, menu etc.
    Menu Mode
    Menu Color
    Profile Mode
    Form Type
    RTL Mode
    off
    on