Amelia Cabal

Normal Employee ONLINE

AMILEA’S SUMMARY

$10,491.08
Revenue
+2.5M
Potential Reach
299.565
Pageview
5.965
Followers

PANDORA STREAM

  • United States
  • Brasil
  • Germany
  • Argentina
    • Help

    • Watched Tags

      Edit
    • PrimeFaces PrimeNG PrimeVue PrimeReact CSS HTML SASS Algorithm User Interface Twitter Grid Firefox JavaScript
    • Notifications

      all items
  • English
    • Languages

System Status
CPU
GPU
SSD

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
Your Palette
Menu
Menu Active
Topbar
Component
Palettes