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
An element can configured as a flexbox container using the p-d-flex or p-d-inline-flex classes.
Default is applied using the p-flex-{direction} class where direction can be either of the following.
Row direction for larger screens and column for smaller.
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.
Orders change depending on the screen size.
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.
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.
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.
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.
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.
When combined with
PrimeFlex.