Activity
New Sale
Richard Jones has purchased a blue t-shirt for $79.
Withdrawal Initiated
Your request for withdrawal of $2500 has been initiated.
Question Received
Jane Davis has posted a new question about your product.
Comment Received
Claire Smith has upvoted your store along with a comment.
Quick Withdraw
Shipment Tracking

Track your ongoing shipments to customers.

Menu Type
Color Scheme
Input Style
Menu Themes
Component Themes
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
DIAMOND
© Your Organization - 2021