### Install PrimeFlex

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Installs PrimeFlex version 2.0.0 using npm. This is the initial step for integrating PrimeFlex into an existing application.

```bash
npm install primeflex@2.0.0 --save
```

--------------------------------

### Flexbox Horizontal Spacing Example

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Example showing horizontal spacing using margin utilities in a flex container.

```html
<div class="p-d-flex p-p-3 card">
    <button pButton pRipple type="button" icon="pi pi-check" class="p-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="p-ml-auto p-button-help"></button>
</div>
```

--------------------------------

### Flexbox Vertical Spacing Example

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Example demonstrating vertical spacing using margin utilities for items in a flex column.

```html
<div class="p-d-flex p-flex-column" style="height:150px">
    <div>Item 1</div>
    <div class="p-mt-auto">Item 2</div>
</div>
```

--------------------------------

### PrimeFlex Display Utilities

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Shows examples of using PrimeFlex's display utility classes (p-d-*) for controlling element display properties, including responsive variations based on screen size breakpoints (sm, md, lg, xl) and print visibility.

```html
<div class="p-d-inline">Displayed as inline.</div>
<div class="p-d-flex">Displayed as a flexbox container.</div>
<div class="p-d-block p-d-lg-inline">Inline for larger screens and block for others.</div>
<div class="p-d-md-none">Visible on a Small Screen</div>
<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>
<div class="p-d-none p-d-print-block">Only visible when printed.</div>
<div class="p-d-block p-d-print-none">Not available for printing.</div>
```

--------------------------------

### PrimeFlex 12-Column Grid Layouts

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Illustrates the PrimeFlex 12-column grid system. Columns can be defined with specific widths using 'p-col-{number}' classes. This example shows a column taking 4 units of space, with others auto-adjusting, and another example with explicit column widths.

```html
<div class="p-grid">
    <div class="p-col-4">4</div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
    <div class="p-col">1 </div>
</div>

<div class="p-grid">
    <div class="p-col-2">2</div>
    <div class="p-col-6">6</div>
    <div class="p-col-4">4</div>
</div>
```

--------------------------------

### Flexbox Align Self Example

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates the usage of 'align-self' classes to control individual item alignment within a flex container.

```html
<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>
```

--------------------------------

### Nested Columns

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Columns can be nested within each other to create more complex and structured layouts. This example shows a main 8-column layout containing its own grid.

```html
<div class="p-grid">
    <div class="p-col-8">
        <div class="p-grid">
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-6">
                6
            </div>
            <div class="p-col-12">
                12
            </div>
        </div>
    </div>
    <div class="p-col-4">
        4
    </div>
</div>
```

--------------------------------

### PrimeFlex Flexbox Align Items Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Aligns flex items along the cross axis of the container. Options include start, end, center, baseline, and stretch, with responsive variations available.

```html
<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>
```

```html
<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>
```

--------------------------------

### PrimeFlex Flexbox Justify Content Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Aligns flex items along the main axis of the container. Supports various alignment options like start, end, center, between, around, and evenly, with responsive variants.

```html
<div class="p-d-flex p-jc-between">
    <div>Item 1</div>
    <div>Item 2</div>
</div>
```

```html
<div class="p-d-flex p-jc-center">
    <div class="p-mr-2">Item 1</div>
    <div>Item 2</div>
</div>
```

--------------------------------

### Import PrimeFlex CSS

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates two methods for including PrimeFlex CSS in an application: via a CDN link or through an import statement for bundlers.

```html
<link rel="stylesheet" href="https://unpkg.com/primeflex@2.0.0/primeflex.css">
```

```javascript
import 'primeflex/primeflex.css';
```

--------------------------------

### Responsive Form Layout with PrimeFlex

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Implements a responsive form layout using PrimeFlex utility classes. It demonstrates how to structure form fields for different screen sizes, ensuring a consistent user experience across devices.

```html
<div class="p-fluid p-formgrid p-grid">
    <div class="p-field p-col-12 p-md-6">
        <label for="firstname">Firstname</label>
        <input id="firstname" type="text" pInputText>
    </div>
    <div class="p-field p-col-12 p-md-6">
        <label for="lastname">Lastname</label>
        <input id="lastname" type="text" pInputText>
    </div>
    <div class="p-field p-col-12">
        <label for="address">Address</label>
        <textarea id="address" type="text" rows="4" pInputTextarea></textarea>
    </div>
    <div class="p-field p-col-12 p-md-6">
        <label for="city">City</label>
        <input id="city" type="text" pInputText>
    </div>
    <div class="p-field p-col-12 p-md-3">
        <label for="state">State</label>
        <p-dropdown inputId="state" [options]="states" [(ngModel)]="selectedState" placeholder="Select" optionLabel="name"></p-dropdown>
    </div>
    <div class="p-field p-col-12 p-md-3">
        <label for="zip">Zip</label>
        <input id="zip" type="text" pInputText>
    </div>
</div>
```

--------------------------------

### FormLayout Vertical Grid Layout

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Illustrates how to create a multi-column vertical form layout using '.p-formgrid' and '.p-grid' for responsive design.

```html
<div class="p-fluid p-formgrid p-grid">
    <div class="p-field p-col">
        <label for="firstname1">Firstname</label>
        <input id="firstname1" type="text" pInputText>
    </div>
    <div class="p-field p-col">
        <label for="lastname1">Lastname</label>
        <input id="lastname1" type="text" pInputText>
    </div>
</div>
```

--------------------------------

### Basic PrimeFlex Grid System

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates the fundamental PrimeFlex grid system. A container with the 'p-grid' class and child elements with 'p-col' class create a basic flexbox-based layout where columns share space equally.

```html
<div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
</div>
```

--------------------------------

### PrimeFlex Responsive Grid Layouts by Breakpoint

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Illustrates responsive design in PrimeFlex using breakpoint-specific classes. Columns adapt their layout based on screen size: 'p-col-12' for all sizes, 'p-md-6' for medium devices, and 'p-lg-3' for large screens, resulting in 4 columns.

```html
<div class="p-grid">
    <div class="p-col-12 p-md-6 p-lg-3">A</div>
    <div class="p-col-12 p-md-6 p-lg-3">B</div>
    <div class="p-col-12 p-md-6 p-lg-3">C</div>
    <div class="p-col-12 p-md-6 p-lg-3">D</div>
</div>
```

--------------------------------

### PrimeFlex Elevation Utility

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates how to apply elevation styles to elements using the p-shadow-{level} classes, with levels ranging from 1 to 24.

```html
<div class="p-shadow-1" />
```

```html
<div class="p-shadow-24" />
```

--------------------------------

### PrimeFlex Flexbox Container

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Illustrates how to define an element as a flexbox container using either the p-d-flex or p-d-inline-flex utility classes.

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

--------------------------------

### FormLayout Basic Structure

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Shows the fundamental structure of a form field using the '.p-field' class to wrap labels and inputs.

```html
<div class="p-field">
    <label for="fieldId">Label</label>
    <input id="fieldId" type="text" pInputText>
</div>
```

--------------------------------

### Spacing Utilities

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Spacing utilities use the p-{property}{position}-{value} syntax for general spacing and p-{property}{position}-{breakpoint}-{value} for responsive spacing. Properties include margin (m) and padding (p), positions cover all sides (blank), specific sides (t, b, l, r), or axes (x, y). Values range from 0 to 6, with 'auto' available for margins.

```html
<div class="p-mb-2">Margin bottom with level 2</div>
<div class="p-mt-4">Margin top with level 4</div>
<div class="p-m-2">Margin for all sides with level 2</div>
<div class="p-mx-auto">Auto margins for left and right side</div>
<div class="p-pb-4">Padding bottom with level 4</div>
<div class="p-p-1">Padding for all sides with level 1</div>
<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>
```

--------------------------------

### PrimeFlex Flexbox Order Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Provides classes to control the order of flex items within a container. Supports responsive adjustments based on screen size. Uses the 'order' CSS property.

```html
<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>
```

```html
<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>
```

--------------------------------

### PrimeFlex Flexbox Wrap Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Controls how flex items wrap within a container when there isn't enough space. Includes options for nowrap, wrap, and wrap-reverse, with responsive variants.

```html
<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>
```

```html
<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>
```

```html
<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>
```

--------------------------------

### Input Field with Helper Text

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Shows how to add helper text to an input field using a `<small>` tag with an `id` that is referenced by the input's `aria-describedby` attribute. The `.p-field` and `.p-fluid` classes are used for form structure.

```html
<div class="p-field p-fluid">
    <label for="username">Username</label>
    <input id="username" type="username" pInputText aria-describedby="username-help">
    <small id="username-help">Enter your username to reset your password.</small>
</div>
```

--------------------------------

### Inline Form Layout

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Implements an inline form layout using the `.p-formgroup-inline` class. It includes input fields and a submit button on the same row. The `.p-sr-only` class is used for screen reader accessibility on labels.

```html
<div class="p-formgroup-inline">
    <div class="p-field">
        <label for="firstname" class="p-sr-only">Firstname</label>
        <input id="firstname" type="text" pInputText placeholder="Firstname">
    </div>
    <div class="p-field">
        <label for="lastname" class="p-sr-only">Lastname</label>
        <input id="lastname" type="text" pInputText placeholder="Lastname">
    </div>
    <button pButton type="button" label="Submit"></button>
</div>
```

--------------------------------

### Text Alignment

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Text alignment utilities provide options for left, center, right, and justify alignment for text content within elements.

```html
<div class="p-text-left">Left</div>
<div class="p-text-center">Center</div>
<div class="p-text-right">Right</div>
<div class="p-text-justify">Justify</div>
```

--------------------------------

### FormLayout Vertical Fluid Layout

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates a vertical form layout where components automatically occupy full width when within a '.p-fluid' container.

```html
<div class="p-fluid">
    <div class="p-field">
        <label for="firstname1">Firstname</label>
        <input id="firstname1" type="text" pInputText>
    </div>
    <div class="p-field">
        <label for="lastname1">Lastname</label>
        <input id="lastname1" type="text" pInputText>
    </div>
</div>
```

--------------------------------

### Horizontal Form with Fixed Width Labels

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates a horizontal form layout where labels have a fixed width, and input fields occupy the remaining space. This is achieved using `.p-col-fixed` for labels and `.p-col` for input containers.

```html
<div class="p-field p-grid">
    <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
    <div class="p-col">
        <input id="firstname3" type="text" pInputText>
    </div>
</div>
<div class="p-field p-grid">
    <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
    <div class="p-col">
        <input id="lastname3" type="text" pInputText>
    </div>
</div>
```

--------------------------------

### Text Style

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Text style utilities apply font weight and style changes, including bold, normal, light, and italic.

```html
<div class="p-text-bold">Bold</div>
<div class="p-text-normal">Normal</div>
<div class="p-text-light">Light</div>
<div class="p-text-italic">Italic</div>
```

--------------------------------

### Horizontal Form with Fluid Layout

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Shows a fluid horizontal form layout by applying the `.p-fluid` class to the form container and using responsive grid classes like `.p-col-12` and `.p-md-10` for input elements.

```html
<div class="p-fluid">
    <div class="p-field p-grid">
        <label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
        <div class="p-col-12 p-md-10">
            <input id="firstname" type="text" pInputText>
        </div>
    </div>
    <div class="p-field p-grid">
        <label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
        <div class="p-col-12 p-md-10">
            <input id="lastname" type="text" pInputText>
        </div>
    </div>
</div>
```

--------------------------------

### PrimeFlex Multi-Line Grid Behavior

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Shows how PrimeFlex handles multi-line layouts. When the total column width exceeds the container's width (e.g., two 'p-col-6' columns on a line), subsequent columns wrap to the next line.

```html
<div class="p-grid">
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
</div>
```

--------------------------------

### Text Wrapping

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Text wrapping utilities control how text behaves when it exceeds its container's width. Options include nowrap, wrap, and truncate.

```html
<div style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
```

--------------------------------

### Vertical and Horizontal Checkbox Layouts

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates layout options for checkboxes. Vertical layout uses `.p-field-checkbox`, while horizontal layout combines `.p-formgroup-inline` with `.p-field-checkbox`.

```html
<h3>Vertical Checkbox</h3>
<div class="p-field-checkbox">
    <p-checkbox name="city1" value="Chicago" [(ngModel)]="cities1" inputId="city1"></p-checkbox>
    <label for="city1">Chicago</label>
</div>
<div class="p-field-checkbox">
    <p-checkbox name="city2" value="Los Angeles" [(ngModel)]="cities1" inputId="city2"></p-checkbox>
    <label for="city2">Los Angeles</label>
</div>

<h3>Horizontal Checkbox</h3>
<div class="p-formgroup-inline">
    <div class="p-field-checkbox">
        <p-checkbox name="city3" value="Chicago" [(ngModel)]="cities2" inputId="city3"></p-checkbox>
        <label for="city3">Chicago</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="city4" value="Los Angeles" [(ngModel)]="cities2" inputId="city4"></p-checkbox>
        <label for="city4">Los Angeles</label>
    </div>
</div>
```

--------------------------------

### Vertical and Horizontal RadioButton Layouts

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Illustrates layout options for radio buttons. Vertical layout uses `.p-field-radiobutton`, and horizontal layout uses `.p-formgroup-inline` with `.p-field-checkbox` (note: `.p-field-checkbox` is used here for styling consistency with checkboxes in inline groups).

```html
<h3>Vertical RadioButton</h3>
<div class="p-field-radiobutton">
    <p-radioButton name="city5" value="Chicago" [(ngModel)]="city1" inputId="city5"></p-radioButton>
    <label for="city5">Chicago</label>
</div>
<div class="p-field-radiobutton">
    <p-radioButton name="city6" value="Los Angeles" [(ngModel)]="city1" inputId="city6"></p-radioButton>
    <label for="city6">Los Angeles</label>
</div>

<h3>Horizontal RadioButton</h3>
<div class="p-formgroup-inline">
    <div class="p-field-checkbox">
    <p-radioButton name="city7" value="Chicago" [(ngModel)]="city2" inputId="city7"></p-radioButton>
    <label for="city7">Chicago</label>
    </div>
    <div class="p-field-checkbox">
        <p-radioButton name="city8" value="Los Angeles" [(ngModel)]="city2" inputId="city8"></p-radioButton>
        <label for="city8">Los Angeles</label>
    </div>
</div>
```

--------------------------------

### PrimeFlex Fixed Width Column

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Demonstrates how to create a column with a fixed width in PrimeFlex. Applying the 'p-col-fixed' class to a column allows it to maintain its specified width while other sibling columns adjust automatically.

```html
<div class="p-grid">
    <div class="p-col-fixed" style="width:100px">Fixed</div>
    <div class="p-col">Auto</div>
</div>
```

--------------------------------

### Offset Columns

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Offset classes are used to define a left margin on a column, avoiding empty columns for spacing. Classes range from p-col-offset-1 to p-col-offset-12 and have responsive variants for different screen sizes.

```html
<div class="p-grid">
    <div class="p-col-6 p-offset-3">6</div>
</div>

<div class="p-grid">
    <div class="p-col-4">4 </div>
    <div class="p-col-4 p-offset-4">4</div>
</div>
```

--------------------------------

### Gutter Control

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

PrimeFlex applies a .5rem padding to columns, creating gutters. These gutters can be removed by applying the .p-nogutter class to the container or individual columns.

```html
<div class="p-grid p-nogutter">
    <div class="p-col">1</div>
    <div class="p-col p-nogutter">2</div>
    <div class="p-col">3</div>
</div>
```

--------------------------------

### PrimeFlex Flexbox Direction

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Shows how to control the direction of flex items within a flex container using p-flex-{direction} classes (row, row-reverse, column, column-reverse), including responsive adjustments.

```html
<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>
```

```html
<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>
```

```html
<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>
```

--------------------------------

### Text Transformation

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Text transformation utilities allow changing the case of text to lowercase, uppercase, or capitalize.

```html
<div class="p-text-lowercase">LOWERCASE</div>
<div class="p-text-uppercase">uppercase</div>
<div class="p-text-capitalize">capitalize</div>
```

--------------------------------

### PrimeFlex Flexbox Direction Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Defines classes for controlling flex container direction (row, column) and their responsive variants. These classes set the 'flex-direction' CSS property.

```css
.p-flex-row { flex-direction: row !important; }
.p-flex-row-reverse { flex-direction: row-reverse !important; }
.p-flex-column { flex-direction: column !important; }
.p-flex-column-reverse { flex-direction: column-reverse !important; }

/* Responsive variants */
.p-flex-sm-row { flex-direction: row !important; }
.p-flex-sm-row-reverse { flex-direction: row-reverse !important; }
.p-flex-sm-column { flex-direction: column !important; }
.p-flex-sm-column-reverse { flex-direction: column-reverse !important; }

.p-flex-md-row { flex-direction: row !important; }
.p-flex-md-row-reverse { flex-direction: row-reverse !important; }
.p-flex-md-column { flex-direction: column !important; }
.p-flex-md-column-reverse { flex-direction: column-reverse !important; }

.p-flex-lg-row { flex-direction: row !important; }
.p-flex-lg-row-reverse { flex-direction: row-reverse !important; }
.p-flex-lg-column { flex-direction: column !important; }
.p-flex-lg-column-reverse { flex-direction: column-reverse !important; }

.p-flex-xl-row { flex-direction: row !important; }
.p-flex-xl-row-reverse { flex-direction: row-reverse !important; }
.p-flex-xl-column { flex-direction: column !important; }
.p-flex-xl-column-reverse { flex-direction: column-reverse !important; }
```

--------------------------------

### Flexbox Align Content Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Classes for controlling the alignment of flex lines along the cross axis.

```css
.p-ac-start { align-content: flex-start; }
.p-ac-end { align-content: flex-end; }
.p-ac-center { align-content: center; }
.p-ac-around { align-content: space-around; }
.p-ac-stretch { align-content: stretch; }
.p-ac-between { align-content: space-between; }

/* Responsive variants */
.p-ac-sm-start { align-content: flex-start; }
.p-ac-sm-end { align-content: flex-end; }
.p-ac-sm-center { align-content: center; }
.p-ac-sm-around { align-content: space-around; }
.p-ac-sm-stretch { align-content: stretch; }
.p-ac-sm-between { align-content: space-between; }

.p-ac-md-start { align-content: flex-start; }
.p-ac-md-end { align-content: flex-end; }
.p-ac-md-center { align-content: center; }
.p-ac-md-around { align-content: space-around; }
.p-ac-md-stretch { align-content: stretch; }
.p-ac-md-between { align-content: space-between; }

.p-ac-lg-start { align-content: flex-start; }
.p-ac-lg-end { align-content: flex-end; }
.p-ac-lg-center { align-content: center; }
.p-ac-lg-around { align-content: space-around; }
.p-ac-lg-stretch { align-content: stretch; }
.p-ac-lg-between { align-content: space-between; }

.p-ac-xl-start { align-content: flex-start; }
.p-ac-xl-end { align-content: flex-end; }
.p-ac-xl-center { align-content: center; }
.p-ac-xl-around { align-content: space-around; }
.p-ac-xl-stretch { align-content: stretch; }
.p-ac-xl-between { align-content: space-between; }
```

--------------------------------

### Flexbox Align Items Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Classes for controlling the alignment of flex items along the cross axis.

```css
.p-ai-start { align-items: flex-start; }
.p-ai-end { align-items: flex-end; }
.p-ai-center { align-items: center; }
.p-ai-baseline { align-items: baseline; }
.p-ai-strech { align-items: stretch; }

/* Responsive variants */
.p-ai-sm-start { align-items: flex-start; }
.p-ai-sm-end { align-items: flex-end; }
.p-ai-sm-center { align-items: center; }
.p-ai-sm-baseline { align-items: baseline; }
.p-ai-sm-strech { align-items: stretch; }

.p-ai-md-start { align-items: flex-start; }
.p-ai-md-end { align-items: flex-end; }
.p-ai-md-center { align-items: center; }
.p-ai-md-baseline { align-items: baseline; }
.p-ai-md-strech { align-items: stretch; }

.p-ai-lg-start { align-items: flex-start; }
.p-ai-lg-end { align-items: flex-end; }
.p-ai-lg-center { align-items: center; }
.p-ai-lg-baseline { align-items: baseline; }
.p-ai-lg-strech { align-items: stretch; }

.p-ai-xl-start { align-items: flex-start; }
.p-ai-xl-end { align-items: flex-end; }
.p-ai-xl-center { align-items: center; }
.p-ai-xl-baseline { align-items: baseline; }
.p-ai-xl-strech { align-items: stretch; }
```

--------------------------------

### Flexbox Align Self Classes

Source: https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2

Classes for controlling the alignment of a flex item along the cross axis.

```css
.p-as-start { align-self: flex-start; }
.p-as-end { align-self: flex-end; }
.p-as-center { align-self: center; }
.p-as-baseline { align-self: baseline; }
.p-as-strech { align-self: stretch; }

/* Responsive variants */
.p-as-sm-start { align-self: flex-start; }
.p-as-sm-end { align-self: flex-end; }
.p-as-sm-center { align-self: center; }
.p-as-sm-baseline { align-self: baseline; }
.p-as-sm-strech { align-self: stretch; }

.p-as-md-start { align-self: flex-start; }
.p-as-md-end { align-self: flex-end; }
.p-as-md-center { align-self: center; }
.p-as-md-baseline { align-self: baseline; }
.p-as-md-strech { align-self: stretch; }

.p-as-lg-start { align-self: flex-start; }
.p-as-lg-end { align-self: flex-end; }
.p-as-lg-center { align-self: center; }
.p-as-lg-baseline { align-self: baseline; }
.p-as-lg-strech { align-self: stretch; }

.p-as-xl-start { align-self: flex-start; }
.p-as-xl-end { align-self: flex-end; }
.p-as-xl-center { align-self: center; }
.p-as-xl-baseline { align-self: baseline; }
.p-as-xl-strech { align-self: stretch; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.