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 flex or inline-flex classes.

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

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

Row
<div class="flex"> <div class="mr-2">Item 1</div> <div class="mr-2">Item 2</div> <div>Item 3</div> </div>
Item 1
Item 2
Item 3
Column
<div class="flex flex-column"> <div class="mb-2">Item 1</div> <div class="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="flex flex-column md:flex-row"> <div class="mb-2 mr-2">Item 1</div> <div class="mb-2 mr-2">Item 2</div> <div class="mb-2 mr-2">Item 3</div> </div>
Item 1
Item 2
Item 3
Direction Classes
Order

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

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

Orders change depending on the screen size.

<div class="flex"> <div class="mr-2 flex-order-3 md:flex-order-2">Item 1</div> <div class="mr-2 flex-order-1 md:flex-order-3">Item 2</div> <div class="mr-2 flex-order-2 md:flex-order-1">Item 3</div> </div>
Item 1
Item 2
Item 3
Order Classes
Wrap

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

No Wrap
<div class="flex"> <div class="mr-2 mb-2">Item 1</div> <div class="mr-2 mb-2">Item 2</div> <div class="mr-2 mb-2">Item 3</div> <div class="mr-2 mb-2">Item 4</div> <div class="mr-2 mb-2">Item 5</div> <div class="mr-2 mb-2">Item 6</div> </div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap
<div class="flex flex-wrap"> <div class="mr-2 mb-2">Item 1</div> <div class="mr-2 mb-2">Item 2</div> <div class="mr-2 mb-2">Item 3</div> <div class="mr-2 mb-2">Item 4</div> <div class="mr-2 mb-2">Item 5</div> <div class="mr-2 mb-2">Item 6</div> </div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap Reverse
<div class="flex flex-wrap-reverse"> <div class="mr-2 mb-2">Item 1</div> <div class="mr-2 mb-2">Item 2</div> <div class="mr-2 mb-2">Item 3</div> <div class="mr-2 mb-2">Item 4</div> <div class="mr-2 mb-2">Item 5</div> <div class="mr-2 mb-2">Item 6</div> </div>
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap Classes
Justify Content

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

Between
<div class="flex justify-content-between"> <div>Item 1</div> <div>Item 2</div> </div>
Item 1
Item 2
Center
<div class="flex justify-content-center"> <div class="mr-2">Item 1</div> <div>Item 2</div> </div>
Item 1
Item 2
Justify Content Classes
Align Items

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

Start
<div class="flex align-items-start"> <div class="mr-2" style="height:100px">Item 1</div> <div style="height:50px">Item 2</div> </div>
Item 1
Item 2
Center
<div class="flex align-items-center"> <div class="mr-2" style="height:100px">Item 1</div> <div style="height:50px">Item 2</div> </div>
Item 1
Item 2
Align Items Classes
Align Self

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

<div class="flex" style="height: 150px;"> <div class="mr-2 align-self-start">Start</div> <div class="mr-2 align-self-center">Center</div> <div class="mr-2 align-self-end">End</div> <div class="mr-2 align-self-stretch">Stretch</div> </div>
Start
Center
End
Stretch
Align Items Classes
Align Content

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

Align Content Classes
Margin with FlexBox

When combined with spacing utilities, flexbox offers endless possibilities.

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