0
# Flexbox Utilities
1

2
PrimeFlex provides comprehensive flexbox utilities for controlling flex container and flex item behavior. All flexbox utilities support responsive breakpoints and work together to create flexible layouts.
3

4
## Flex Direction
5

6
```scss { .api }
7
.flex-row { flex-direction: row; }
8
.flex-row-reverse { flex-direction: row-reverse; }
9
.flex-column { flex-direction: column; }
10
.flex-column-reverse { flex-direction: column-reverse; }
11
```
12

13
## Flex Wrap
14

15
```scss { .api }
16
.flex-wrap { flex-wrap: wrap; }
17
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
18
.flex-nowrap { flex-wrap: nowrap; }
19
```
20

21
## Justify Content
22

23
```scss { .api }
24
.justify-content-start { justify-content: flex-start; }
25
.justify-content-end { justify-content: flex-end; }
26
.justify-content-center { justify-content: center; }
27
.justify-content-between { justify-content: space-between; }
28
.justify-content-around { justify-content: space-around; }
29
.justify-content-evenly { justify-content: space-evenly; }
30
```
31

32
## Align Content
33

34
```scss { .api }
35
.align-content-start { align-content: flex-start; }
36
.align-content-end { align-content: flex-end; }
37
.align-content-center { align-content: center; }
38
.align-content-between { align-content: space-between; }
39
.align-content-around { align-content: space-around; }
40
.align-content-evenly { align-content: space-evenly; }
41
```
42

43
## Align Items
44

45
```scss { .api }
46
.align-items-stretch { align-items: stretch; }
47
.align-items-start { align-items: flex-start; }
48
.align-items-center { align-items: center; }
49
.align-items-end { align-items: flex-end; }
50
.align-items-baseline { align-items: baseline; }
51
```
52

53
## Align Self
54

55
```scss { .api }
56
.align-self-auto { align-self: auto; }
57
.align-self-start { align-self: flex-start; }
58
.align-self-end { align-self: flex-end; }
59
.align-self-center { align-self: center; }
60
.align-self-stretch { align-self: stretch; }
61
.align-self-baseline { align-self: baseline; }
62
```
63

64
## Flex Properties
65

66
```scss { .api }
67
.flex-1 { flex: 1 1 0%; }
68
.flex-auto { flex: 1 1 auto; }
69
.flex-initial { flex: 0 1 auto; }
70
.flex-none { flex: none; }
71
```
72

73
## Flex Grow
74

75
```scss { .api }
76
.flex-grow-0 { flex-grow: 0; }
77
.flex-grow-1 { flex-grow: 1; }
78
```
79

80
## Flex Shrink
81

82
```scss { .api }
83
.flex-shrink-0 { flex-shrink: 0; }
84
.flex-shrink-1 { flex-shrink: 1; }
85
```
86

87
## Flex Order
88

89
```scss { .api }
90
.flex-order-0 { order: 0; }
91
.flex-order-1 { order: 1; }
92
.flex-order-2 { order: 2; }
93
.flex-order-3 { order: 3; }
94
.flex-order-4 { order: 4; }
95
.flex-order-5 { order: 5; }
96
.flex-order-6 { order: 6; }
97
```
98

99
## Gap Utilities
100

101
```scss { .api }
102
.gap-0 { gap: 0; }
103
.gap-1 { gap: 0.25rem; }
104
.gap-2 { gap: 0.5rem; }
105
.gap-3 { gap: 1rem; }
106
.gap-4 { gap: 1.5rem; }
107
.gap-5 { gap: 2rem; }
108
.gap-6 { gap: 3rem; }
109
.gap-7 { gap: 4rem; }
110
.gap-8 { gap: 5rem; }
111

112
// Directional gaps
113
.gap-x-0 { column-gap: 0; }
114
.gap-x-1 { column-gap: 0.25rem; }
115
.gap-x-2 { column-gap: 0.5rem; }
116
.gap-x-3 { column-gap: 1rem; }
117
.gap-x-4 { column-gap: 1.5rem; }
118
.gap-x-5 { column-gap: 2rem; }
119
.gap-x-6 { column-gap: 3rem; }
120
.gap-x-7 { column-gap: 4rem; }
121
.gap-x-8 { column-gap: 5rem; }
122

123
.gap-y-0 { row-gap: 0; }
124
.gap-y-1 { row-gap: 0.25rem; }
125
.gap-y-2 { row-gap: 0.5rem; }
126
.gap-y-3 { row-gap: 1rem; }
127
.gap-y-4 { row-gap: 1.5rem; }
128
.gap-y-5 { row-gap: 2rem; }
129
.gap-y-6 { row-gap: 3rem; }
130
.gap-y-7 { row-gap: 4rem; }
131
.gap-y-8 { row-gap: 5rem; }
132
```
133

134
## Responsive Variants
135

136
All flexbox utilities support responsive breakpoints:
137

138
```scss { .api }
139
// Small screens (≥576px)
140
.sm\\:flex-row { /* flex-direction: row at sm+ */ }
141
.sm\\:justify-content-center { /* justify-content: center at sm+ */ }
142
.sm\\:align-items-center { /* align-items: center at sm+ */ }
143
// ... all flexbox classes with sm: prefix
144

145
// Medium screens (≥768px)
146
.md\\:flex-column { /* flex-direction: column at md+ */ }
147
.md\\:justify-content-between { /* justify-content: space-between at md+ */ }
148
// ... all flexbox classes with md: prefix
149

150
// Large screens (≥992px)
151
.lg\\:flex-row { /* flex-direction: row at lg+ */ }
152
.lg\\:flex-wrap { /* flex-wrap: wrap at lg+ */ }
153
// ... all flexbox classes with lg: prefix
154

155
// Extra large screens (≥1200px)
156
.xl\\:justify-content-start { /* justify-content: flex-start at xl+ */ }
157
.xl\\:align-items-end { /* align-items: flex-end at xl+ */ }
158
// ... all flexbox classes with xl: prefix
159
```
160

161
## Usage Examples
162

163
### Centered Content
164

165
```html
166
<div class="flex align-items-center justify-content-center h-screen">
167
  <div class="p-4 bg-primary text-white border-round">
168
    Perfectly centered content
169
  </div>
170
</div>
171
```
172

173
### Navigation Bar
174

175
```html
176
<nav class="flex align-items-center justify-content-between p-3 bg-primary">
177
  <div class="flex align-items-center gap-2">
178
    <img src="logo.png" alt="Logo" class="w-2rem h-2rem">
179
    <span class="text-white font-bold">Brand</span>
180
  </div>
181
  <div class="flex gap-3">
182
    <a href="#" class="text-white no-underline">Home</a>
183
    <a href="#" class="text-white no-underline">About</a>
184
    <a href="#" class="text-white no-underline">Contact</a>
185
  </div>
186
</nav>
187
```
188

189
### Card Layout
190

191
```html
192
<div class="flex flex-column gap-3 p-4 surface-card border-round shadow-2">
193
  <div class="flex align-items-center justify-content-between">
194
    <h3 class="m-0 text-primary">Card Title</h3>
195
    <i class="pi pi-star text-yellow-400"></i>
196
  </div>
197
  <p class="m-0 text-color-secondary line-height-3">
198
    Card content goes here with some descriptive text.
199
  </p>
200
  <div class="flex gap-2 align-items-center justify-content-end">
201
    <button class="border-none bg-primary text-white p-2 border-round cursor-pointer">
202
      Action
203
    </button>
204
    <button class="border-1 border-primary text-primary bg-transparent p-2 border-round cursor-pointer">
205
      Cancel
206
    </button>
207
  </div>
208
</div>
209
```
210

211
### Responsive Flex Direction
212

213
```html
214
<div class="flex flex-column md:flex-row gap-4">
215
  <div class="p-4 bg-primary text-white border-round">
216
    Stacked on mobile, side by side on tablet+
217
  </div>
218
  <div class="p-4 surface-section border-round">
219
    Responsive flex layout
220
  </div>
221
</div>
222
```
223

224
### Sidebar Layout
225

226
```html
227
<div class="flex min-h-screen">
228
  <aside class="w-15rem bg-primary text-white p-3">
229
    <nav class="flex flex-column gap-2">
230
      <a href="#" class="text-white no-underline p-2 border-round hover:bg-primary-600">
231
        Dashboard
232
      </a>
233
      <a href="#" class="text-white no-underline p-2 border-round hover:bg-primary-600">
234
        Settings
235
      </a>
236
    </nav>
237
  </aside>
238
  <main class="flex-1 p-4">
239
    <h1>Main Content</h1>
240
    <p>Content area that grows to fill remaining space.</p>
241
  </main>
242
</div>
243
```
244

245
### Equal Height Cards
246

247
```html
248
<div class="grid">
249
  <div class="col-12 md:col-4">
250
    <div class="flex flex-column h-full p-4 surface-card border-round shadow-1">
251
      <h3 class="m-0 mb-3">Card 1</h3>
252
      <p class="flex-1 m-0">Short content</p>
253
      <button class="mt-3 p-2 bg-primary text-white border-none border-round">
254
        Action
255
      </button>
256
    </div>
257
  </div>
258
  <div class="col-12 md:col-4">
259
    <div class="flex flex-column h-full p-4 surface-card border-round shadow-1">
260
      <h3 class="m-0 mb-3">Card 2</h3>
261
      <p class="flex-1 m-0">Much longer content that takes up multiple lines and demonstrates how flex-1 makes all cards equal height.</p>
262
      <button class="mt-3 p-2 bg-primary text-white border-none border-round">
263
        Action
264
      </button>
265
    </div>
266
  </div>
267
  <div class="col-12 md:col-4">
268
    <div class="flex flex-column h-full p-4 surface-card border-round shadow-1">
269
      <h3 class="m-0 mb-3">Card 3</h3>
270
      <p class="flex-1 m-0">Medium length content</p>
271
      <button class="mt-3 p-2 bg-primary text-white border-none border-round">
272
        Action
273
      </button>
274
    </div>
275
  </div>
276
</div>
277
```