@jsenv/navi 0.7.2 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/jsenv_navi.js +20 -21
  2. package/package.json +2 -2
  3. package/src/components/layout/demos/demo_flex.html +304 -172
  4. package/src/components/layout/flex.jsx +19 -10
package/dist/jsenv_navi.js CHANGED
@@ -823,20 +823,15 @@ const normalizeNumber = (value, context, unit, propertyName) => {
823
823
  return value;
824
824
  }
825
825
  if (typeof value === "string") {
826
- if (value === "auto") {
827
- return "auto";
828
- }
829
- if (value === "none") {
830
- return "none";
831
- }
832
- const numericValue = parseFloat(value);
833
- if (isNaN(numericValue)) {
834
- console.warn(
835
- `"${propertyName}": ${value} cannot be converted to number, returning value as-is.`,
836
- );
837
- return value;
826
+ // For js context, only convert px values to numbers
827
+ if (unit === "px" && value.endsWith("px")) {
828
+ const numericValue = parseFloat(value);
829
+ if (!isNaN(numericValue)) {
830
+ return numericValue;
831
+ }
838
832
  }
839
- return numericValue;
833
+ // Keep all other strings as-is (including %, em, rem, auto, none, etc.)
834
+ return value;
840
835
  }
841
836
  return value;
842
837
  };
@@ -21378,14 +21373,12 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
21378
21373
  .navi_flex_row {
21379
21374
  display: flex;
21380
21375
  flex-direction: row;
21381
- align-items: center;
21382
21376
  gap: 0;
21383
21377
  }
21384
21378
 
21385
21379
  .navi_flex_column {
21386
21380
  display: flex;
21387
21381
  flex-direction: column;
21388
- align-items: center;
21389
21382
  gap: 0;
21390
21383
  }
21391
21384
 
@@ -21395,6 +21388,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
21395
21388
  `;
21396
21389
  const FlexDirectionContext = createContext();
21397
21390
  const FlexRow = ({
21391
+ alignX,
21398
21392
  alignY,
21399
21393
  gap,
21400
21394
  style,
@@ -21402,7 +21396,10 @@ const FlexRow = ({
21402
21396
  ...rest
21403
21397
  }) => {
21404
21398
  const innerStyle = withPropsStyle({
21405
- alignItems: alignY,
21399
+ // Only set justifyContent if it's not the default "start"
21400
+ justifyContent: alignX !== "start" ? alignX : undefined,
21401
+ // Only set alignItems if it's not the default "stretch"
21402
+ alignItems: alignY !== "stretch" ? alignY : undefined,
21406
21403
  gap,
21407
21404
  ...consumeSpacingProps(rest)
21408
21405
  }, style);
@@ -21418,13 +21415,17 @@ const FlexRow = ({
21418
21415
  };
21419
21416
  const FlexColumn = ({
21420
21417
  alignX,
21418
+ alignY,
21421
21419
  gap,
21422
21420
  style,
21423
21421
  children,
21424
21422
  ...rest
21425
21423
  }) => {
21426
21424
  const innerStyle = withPropsStyle({
21427
- alignItems: alignX,
21425
+ // Only set alignItems if it's not the default "stretch"
21426
+ alignItems: alignX !== "stretch" ? alignX : undefined,
21427
+ // Only set justifyContent if it's not the default "start"
21428
+ justifyContent: alignY !== "start" ? alignY : undefined,
21428
21429
  gap,
21429
21430
  ...consumeSpacingProps(rest)
21430
21431
  }, style);
@@ -21447,8 +21448,7 @@ const useConsumAlignProps = props => {
21447
21448
  const style = {};
21448
21449
  if (flexDirection === "row") {
21449
21450
  // In row direction: alignX controls justify-content, alignY controls align-self
21450
- // Default alignY is "center" from CSS, so only set alignSelf when different
21451
- if (alignY !== undefined && alignY !== "center") {
21451
+ if (alignY !== undefined && alignY !== "start") {
21452
21452
  style.alignSelf = alignY;
21453
21453
  }
21454
21454
  // For row, alignX uses auto margins for positioning
@@ -21468,8 +21468,7 @@ const useConsumAlignProps = props => {
21468
21468
  }
21469
21469
  } else if (flexDirection === "column") {
21470
21470
  // In column direction: alignX controls align-self, alignY uses auto margins
21471
- // Default alignX is "center" from CSS, so only set alignSelf when different
21472
- if (alignX !== undefined && alignX !== "center") {
21471
+ if (alignX !== undefined && alignX !== "start") {
21473
21472
  style.alignSelf = alignX;
21474
21473
  }
21475
21474
  // For column, alignY uses auto margins for positioning
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/navi",
3
- "version": "0.7.2",
3
+ "version": "0.8.0",
4
4
  "description": "Library of components including navigation to create frontend applications",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,7 +34,7 @@
34
34
  "prepublishOnly": "npm run build"
35
35
  },
36
36
  "dependencies": {
37
- "@jsenv/dom": "0.5.2",
37
+ "@jsenv/dom": "0.5.3",
38
38
  "@jsenv/humanize": "1.6.0"
39
39
  },
40
40
  "devDependencies": {
package/src/components/layout/demos/demo_flex.html CHANGED
@@ -18,6 +18,10 @@
18
18
  background: #f8f9fa;
19
19
  border-radius: 8px;
20
20
  }
21
+
22
+ h3 {
23
+ margin-top: 0;
24
+ }
21
25
  </style>
22
26
  </head>
23
27
  <body>
@@ -59,13 +63,14 @@
59
63
  </section>
60
64
 
61
65
  <section className="demo-section">
62
- <h3>3. FlexRow with Vertical Alignment</h3>
66
+ <h3>3. FlexRow with Horizontal Alignment (alignX)</h3>
63
67
 
64
- <h4>alignY="start"</h4>
68
+ <h4>alignX="start" (default)</h4>
65
69
  <FlexRow
66
- alignY="start"
70
+ alignX="start"
67
71
  gap="10px"
68
72
  style={{
73
+ width: "400px",
69
74
  height: "80px",
70
75
  background: "#fff3e0",
71
76
  padding: "10px",
@@ -78,11 +83,12 @@
78
83
  <DemoBox>Short</DemoBox>
79
84
  </FlexRow>
80
85
 
81
- <h4>alignY="center" (default)</h4>
86
+ <h4>alignX="center"</h4>
82
87
  <FlexRow
83
- alignY="center"
88
+ alignX="center"
84
89
  gap="10px"
85
90
  style={{
91
+ width: "400px",
86
92
  height: "80px",
87
93
  background: "#e8f5e8",
88
94
  padding: "10px",
@@ -95,11 +101,12 @@
95
101
  <DemoBox>Short</DemoBox>
96
102
  </FlexRow>
97
103
 
98
- <h4>alignY="end"</h4>
104
+ <h4>alignX="end"</h4>
99
105
  <FlexRow
100
- alignY="end"
106
+ alignX="end"
101
107
  gap="10px"
102
108
  style={{
109
+ width: "400px",
103
110
  height: "80px",
104
111
  background: "#ffebee",
105
112
  padding: "10px",
@@ -111,190 +118,165 @@
111
118
  </DemoBox>
112
119
  <DemoBox>Short</DemoBox>
113
120
  </FlexRow>
114
- </section>
115
-
116
- <h2>FlexRow + FlexItem</h2>
117
-
118
- <section className="demo-section">
119
- <h3>4. FlexItem Basic Usage</h3>
120
-
121
- <FlexRow gap="10px">
122
- <FlexItem>
123
- <DemoBox>FlexItem 1</DemoBox>
124
- </FlexItem>
125
- <FlexItem>
126
- <DemoBox>FlexItem 2</DemoBox>
127
- </FlexItem>
128
- <FlexItem>
129
- <DemoBox>FlexItem 3</DemoBox>
130
- </FlexItem>
131
- </FlexRow>
132
- </section>
133
-
134
- <section className="demo-section">
135
- <h3>5. FlexItem with Growth</h3>
136
-
137
- <FlexRow gap="10px">
138
- <FlexItem>
139
- <DemoBox>Fixed</DemoBox>
140
- </FlexItem>
141
- <FlexItem grow>
142
- <DemoBox>Grows to fill</DemoBox>
143
- </FlexItem>
144
- <FlexItem>
145
- <DemoBox>Fixed</DemoBox>
146
- </FlexItem>
147
- </FlexRow>
148
- </section>
149
-
150
- <section className="demo-section">
151
- <h3>6. FlexItem with alignY</h3>
152
121
 
122
+ <h4>alignX="space-between"</h4>
153
123
  <FlexRow
154
- gap="10px"
124
+ alignX="space-between"
155
125
  style={{
156
- height: "100px",
157
- background: "#e1f5fe",
126
+ width: "400px",
127
+ height: "80px",
128
+ background: "#e3f2fd",
158
129
  padding: "10px",
159
130
  }}
160
131
  >
161
- <FlexItem>
162
- <DemoBox>Default (center)</DemoBox>
163
- </FlexItem>
164
- <FlexItem alignY="start">
165
- <DemoBox>alignY="start"</DemoBox>
166
- </FlexItem>
167
- <FlexItem alignY="end">
168
- <DemoBox>alignY="end"</DemoBox>
169
- </FlexItem>
170
- <FlexItem alignY="stretch">
171
- <DemoBox style={{ height: "100%" }}>alignY="stretch"</DemoBox>
172
- </FlexItem>
132
+ <DemoBox>Short</DemoBox>
133
+ <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
134
+ Tall Item
135
+ </DemoBox>
136
+ <DemoBox>Short</DemoBox>
173
137
  </FlexRow>
174
- </section>
175
-
176
- <section className="demo-section">
177
- <h3>7. FlexItem with alignX</h3>
178
138
 
139
+ <h4>alignX="space-around"</h4>
179
140
  <FlexRow
180
- gap="10px"
141
+ alignX="space-around"
181
142
  style={{
143
+ width: "400px",
144
+ height: "80px",
182
145
  background: "#f3e5f5",
183
146
  padding: "10px",
184
147
  }}
185
148
  >
186
- <FlexItem>
187
- <DemoBox>Default</DemoBox>
188
- </FlexItem>
189
- <FlexItem alignX="start">
190
- <DemoBox>alignX="start"</DemoBox>
191
- </FlexItem>
192
- <FlexItem alignX="center">
193
- <DemoBox>alignX="center"</DemoBox>
194
- </FlexItem>
195
- <FlexItem alignX="end">
196
- <DemoBox>alignX="end"</DemoBox>
197
- </FlexItem>
149
+ <DemoBox>Short</DemoBox>
150
+ <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
151
+ Tall Item
152
+ </DemoBox>
153
+ <DemoBox>Short</DemoBox>
198
154
  </FlexRow>
199
155
  </section>
200
156
 
201
157
  <section className="demo-section">
202
- <h3>8. Auto Margin Examples</h3>
158
+ <h3>4. FlexRow with Vertical Alignment (alignY)</h3>
203
159
 
204
- <h4>Single item pushed to end</h4>
160
+ <h4>alignY="start"</h4>
205
161
  <FlexRow
162
+ alignY="start"
206
163
  gap="10px"
207
- style={{ background: "#fff3e0", padding: "10px" }}
164
+ style={{
165
+ height: "80px",
166
+ background: "#fff3e0",
167
+ padding: "10px",
168
+ }}
208
169
  >
209
- <DemoBox>Item 1</DemoBox>
210
- <DemoBox>Item 2</DemoBox>
211
- <FlexItem alignX="end">
212
- <DemoBox>Pushed to end</DemoBox>
213
- </FlexItem>
170
+ <DemoBox>Short</DemoBox>
171
+ <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
172
+ Tall Item
173
+ </DemoBox>
174
+ <DemoBox>Short</DemoBox>
214
175
  </FlexRow>
215
176
 
216
- <h4>Single item centered</h4>
177
+ <h4>alignY="center"</h4>
217
178
  <FlexRow
179
+ alignY="center"
218
180
  gap="10px"
219
- style={{ background: "#e8f5e8", padding: "10px" }}
181
+ style={{
182
+ height: "80px",
183
+ background: "#e8f5e8",
184
+ padding: "10px",
185
+ }}
220
186
  >
221
- <DemoBox>Item 1</DemoBox>
222
- <FlexItem alignX="center">
223
- <DemoBox>Centered</DemoBox>
224
- </FlexItem>
225
- <DemoBox>Item 3</DemoBox>
187
+ <DemoBox>Short</DemoBox>
188
+ <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
189
+ Tall Item
190
+ </DemoBox>
191
+ <DemoBox>Short</DemoBox>
226
192
  </FlexRow>
227
193
 
228
- <h4>Multiple items pushed to end</h4>
194
+ <h4>alignY="end"</h4>
229
195
  <FlexRow
196
+ alignY="end"
230
197
  gap="10px"
231
- style={{ background: "#f0f4ff", padding: "10px" }}
198
+ style={{
199
+ height: "80px",
200
+ background: "#ffebee",
201
+ padding: "10px",
202
+ }}
232
203
  >
233
- <DemoBox>Item 1</DemoBox>
234
- <FlexItem alignX="end">
235
- <DemoBox>Pushed A</DemoBox>
236
- </FlexItem>
237
- <FlexItem alignX="end">
238
- <DemoBox>Pushed B</DemoBox>
239
- </FlexItem>
240
- <FlexItem alignX="end">
241
- <DemoBox>Pushed C</DemoBox>
242
- </FlexItem>
204
+ <DemoBox>Short</DemoBox>
205
+ <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
206
+ Tall Item
207
+ </DemoBox>
208
+ <DemoBox>Short</DemoBox>
243
209
  </FlexRow>
244
210
 
245
- <h4>Multiple items with different alignments</h4>
211
+ <h4>alignY="stretch" (default)</h4>
246
212
  <FlexRow
213
+ alignY="stretch"
247
214
  gap="10px"
248
- style={{ background: "#ffebee", padding: "10px" }}
215
+ style={{
216
+ height: "80px",
217
+ background: "#e1f5fe",
218
+ padding: "10px",
219
+ }}
249
220
  >
250
- <FlexItem alignX="start">
251
- <DemoBox>Start</DemoBox>
252
- </FlexItem>
253
- <DemoBox>Normal</DemoBox>
254
- <FlexItem alignX="center">
255
- <DemoBox>Center</DemoBox>
256
- </FlexItem>
257
- <DemoBox>Normal</DemoBox>
258
- <FlexItem alignX="end">
259
- <DemoBox>End</DemoBox>
260
- </FlexItem>
221
+ <DemoBox>Short</DemoBox>
222
+ <DemoBox style={{ lineHeight: "60px" }}>Tall Item</DemoBox>
223
+ <DemoBox>Short</DemoBox>
261
224
  </FlexRow>
262
225
  </section>
263
226
 
264
227
  <section className="demo-section">
265
- <h3>9. Combined Growth and Alignment</h3>
228
+ <h3>5. Real-World Example: Button with alignX</h3>
266
229
 
267
230
  <FlexRow
268
231
  gap="10px"
269
- style={{ background: "#e1f5fe", padding: "10px" }}
232
+ style={{ background: "#f5f5f5", padding: "10px" }}
270
233
  >
271
- <DemoBox>Fixed</DemoBox>
272
- <FlexItem grow>
273
- <DemoBox>Grows</DemoBox>
234
+ <DemoBox>Content</DemoBox>
235
+ <DemoBox>More content</DemoBox>
236
+ <Button alignX="end" alignY="center">
237
+ Action Button
238
+ </Button>
239
+ </FlexRow>
240
+ </section>
241
+
242
+ <h2>FlexRow + FlexItem</h2>
243
+
244
+ <section className="demo-section">
245
+ <h3>6. FlexItem Basic Usage</h3>
246
+
247
+ <FlexRow gap="10px">
248
+ <FlexItem>
249
+ <DemoBox>FlexItem 1</DemoBox>
274
250
  </FlexItem>
275
- <FlexItem alignX="end">
276
- <DemoBox>Pushed to end</DemoBox>
251
+ <FlexItem>
252
+ <DemoBox>FlexItem 2</DemoBox>
253
+ </FlexItem>
254
+ <FlexItem>
255
+ <DemoBox>FlexItem 3</DemoBox>
277
256
  </FlexItem>
278
257
  </FlexRow>
279
258
  </section>
280
259
 
281
260
  <section className="demo-section">
282
- <h3>10. Real-World Example: Button with alignX</h3>
261
+ <h3>7. FlexItem with Growth</h3>
283
262
 
284
- <FlexRow
285
- gap="10px"
286
- style={{ background: "#f5f5f5", padding: "10px" }}
287
- >
288
- <DemoBox>Content</DemoBox>
289
- <DemoBox>More content</DemoBox>
290
- <Button alignX="end">Action Button</Button>
263
+ <FlexRow gap="10px">
264
+ <FlexItem>
265
+ <DemoBox>Fixed</DemoBox>
266
+ </FlexItem>
267
+ <FlexItem grow>
268
+ <DemoBox>Grows to fill</DemoBox>
269
+ </FlexItem>
270
+ <FlexItem>
271
+ <DemoBox>Fixed</DemoBox>
272
+ </FlexItem>
291
273
  </FlexRow>
292
274
  </section>
293
275
 
294
276
  <h2>FlexColumn</h2>
295
277
 
296
278
  <section className="demo-section">
297
- <h3>10. Basic FlexColumn</h3>
279
+ <h3>8. Basic FlexColumn</h3>
298
280
  <FlexColumn style={{ height: "200px" }}>
299
281
  <DemoBox>Item 1</DemoBox>
300
282
  <DemoBox>Item 2</DemoBox>
@@ -303,7 +285,7 @@
303
285
  </section>
304
286
 
305
287
  <section className="demo-section">
306
- <h3>11. FlexColumn with Gap</h3>
288
+ <h3>9. FlexColumn with Gap</h3>
307
289
  <FlexColumn gap="15px" style={{ height: "200px" }}>
308
290
  <DemoBox>Item 1</DemoBox>
309
291
  <DemoBox>Item 2</DemoBox>
@@ -312,7 +294,7 @@
312
294
  </section>
313
295
 
314
296
  <section className="demo-section">
315
- <h3>12. FlexColumn with Horizontal Alignment</h3>
297
+ <h3>10. FlexColumn with Horizontal Alignment</h3>
316
298
 
317
299
  <h4>alignX="start"</h4>
318
300
  <FlexColumn
@@ -330,7 +312,7 @@
330
312
  <DemoBox>Short</DemoBox>
331
313
  </FlexColumn>
332
314
 
333
- <h4>alignX="center" (default)</h4>
315
+ <h4>alignX="center"</h4>
334
316
  <FlexColumn
335
317
  alignX="center"
336
318
  gap="10px"
@@ -361,16 +343,120 @@
361
343
  <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
362
344
  <DemoBox>Short</DemoBox>
363
345
  </FlexColumn>
346
+
347
+ <h4>alignX="stretch" (default)</h4>
348
+ <FlexColumn
349
+ alignX="stretch"
350
+ gap="10px"
351
+ style={{
352
+ height: "150px",
353
+ width: "300px",
354
+ background: "#e1f5fe",
355
+ padding: "10px",
356
+ }}
357
+ >
358
+ <DemoBox>Short</DemoBox>
359
+ <DemoBox>Wide Item</DemoBox>
360
+ <DemoBox>Short</DemoBox>
361
+ </FlexColumn>
364
362
  </section>
365
363
 
366
364
  <section className="demo-section">
367
- <h3>13. FlexItem with alignX in Column</h3>
365
+ <h3>11. FlexColumn with Vertical Alignment (alignY)</h3>
368
366
 
367
+ <h4>alignY="start" (default)</h4>
369
368
  <FlexColumn
369
+ alignY="start"
370
370
  gap="10px"
371
371
  style={{
372
372
  height: "200px",
373
373
  width: "300px",
374
+ background: "#fff3e0",
375
+ padding: "10px",
376
+ }}
377
+ >
378
+ <DemoBox>Short</DemoBox>
379
+ <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
380
+ <DemoBox>Short</DemoBox>
381
+ </FlexColumn>
382
+
383
+ <h4>alignY="center"</h4>
384
+ <FlexColumn
385
+ alignY="center"
386
+ gap="10px"
387
+ style={{
388
+ height: "200px",
389
+ width: "300px",
390
+ background: "#e8f5e8",
391
+ padding: "10px",
392
+ }}
393
+ >
394
+ <DemoBox>Short</DemoBox>
395
+ <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
396
+ <DemoBox>Short</DemoBox>
397
+ </FlexColumn>
398
+
399
+ <h4>alignY="end"</h4>
400
+ <FlexColumn
401
+ alignY="end"
402
+ gap="10px"
403
+ style={{
404
+ height: "200px",
405
+ width: "300px",
406
+ background: "#ffebee",
407
+ padding: "10px",
408
+ }}
409
+ >
410
+ <DemoBox>Short</DemoBox>
411
+ <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
412
+ <DemoBox>Short</DemoBox>
413
+ </FlexColumn>
414
+
415
+ <h4>alignY="space-between"</h4>
416
+ <FlexColumn
417
+ alignY="space-between"
418
+ style={{
419
+ height: "200px",
420
+ width: "300px",
421
+ background: "#e3f2fd",
422
+ padding: "10px",
423
+ }}
424
+ >
425
+ <DemoBox>Short</DemoBox>
426
+ <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
427
+ <DemoBox>Short</DemoBox>
428
+ </FlexColumn>
429
+ </section>
430
+
431
+ <h2>FlexItem Individual Alignment</h2>
432
+ <p
433
+ style={{
434
+ marginBottom: "20px",
435
+ padding: "15px",
436
+ background: "#fff3e0",
437
+ borderRadius: "6px",
438
+ fontSize: "14px",
439
+ }}
440
+ >
441
+ <strong>Note:</strong> The examples below show how individual
442
+ FlexItem components can override the container's alignment.
443
+ However,{" "}
444
+ <strong>
445
+ in most cases, you should use the FlexRow/FlexColumn alignX and
446
+ alignY props instead
447
+ </strong>
448
+ , as they control all items at once and are more efficient.
449
+ FlexItem alignment is useful for special cases where you need one
450
+ or two items to behave differently from the rest.
451
+ </p>
452
+
453
+ <section className="demo-section">
454
+ <h3>12. FlexItem Individual Alignment in Rows</h3>
455
+
456
+ <h4>FlexItem alignX in Row</h4>
457
+ <FlexRow
458
+ gap="10px"
459
+ style={{
374
460
  background: "#f3e5f5",
375
461
  padding: "10px",
376
462
  }}
@@ -387,12 +473,60 @@
387
473
  <FlexItem alignX="end">
388
474
  <DemoBox>alignX="end"</DemoBox>
389
475
  </FlexItem>
390
- </FlexColumn>
476
+ </FlexRow>
477
+
478
+ <h4>FlexItem alignY in Row</h4>
479
+ <FlexRow
480
+ gap="10px"
481
+ style={{
482
+ height: "100px",
483
+ background: "#e1f5fe",
484
+ padding: "10px",
485
+ }}
486
+ >
487
+ <FlexItem>
488
+ <DemoBox>Default</DemoBox>
489
+ </FlexItem>
490
+ <FlexItem alignY="start">
491
+ <DemoBox>alignY="start"</DemoBox>
492
+ </FlexItem>
493
+ <FlexItem alignY="end">
494
+ <DemoBox>alignY="end"</DemoBox>
495
+ </FlexItem>
496
+ <FlexItem alignY="stretch">
497
+ <DemoBox style={{ height: "100%" }}>alignY="stretch"</DemoBox>
498
+ </FlexItem>
499
+ </FlexRow>
391
500
  </section>
392
501
 
393
502
  <section className="demo-section">
394
- <h3>14. FlexItem with alignY in Column</h3>
503
+ <h3>13. FlexItem Individual Alignment in Columns</h3>
504
+
505
+ <h4>FlexItem alignX in Column</h4>
506
+ <FlexColumn
507
+ gap="10px"
508
+ style={{
509
+ height: "200px",
510
+ width: "300px",
511
+ background: "#f3e5f5",
512
+ padding: "10px",
513
+ }}
514
+ >
515
+ <FlexItem>
516
+ <DemoBox>Default</DemoBox>
517
+ </FlexItem>
518
+ <FlexItem alignX="start">
519
+ <DemoBox>alignX="start"</DemoBox>
520
+ </FlexItem>
521
+ <FlexItem alignX="center">
522
+ <DemoBox>alignX="center"</DemoBox>
523
+ </FlexItem>
524
+ <FlexItem alignX="end">
525
+ <DemoBox>alignX="end"</DemoBox>
526
+ </FlexItem>
527
+ </FlexColumn>
395
528
 
529
+ <h4>FlexItem alignY in Column</h4>
396
530
  <FlexColumn
397
531
  gap="10px"
398
532
  style={{
@@ -418,7 +552,7 @@
418
552
  </section>
419
553
 
420
554
  <section className="demo-section">
421
- <h3>15. Column Auto Margin Examples</h3>
555
+ <h3>14. FlexItem Practical Examples - Column Layout</h3>
422
556
 
423
557
  <h4>Single item pushed to bottom</h4>
424
558
  <FlexColumn
@@ -436,27 +570,6 @@
436
570
  </FlexItem>
437
571
  </FlexColumn>
438
572
 
439
- <h4>Multiple items pushed to bottom</h4>
440
- <FlexColumn
441
- gap="10px"
442
- style={{
443
- height: "250px",
444
- background: "#f0f4ff",
445
- padding: "10px",
446
- }}
447
- >
448
- <DemoBox>Item 1</DemoBox>
449
- <FlexItem alignY="end">
450
- <DemoBox>Pushed A</DemoBox>
451
- </FlexItem>
452
- <FlexItem alignY="end">
453
- <DemoBox>Pushed B</DemoBox>
454
- </FlexItem>
455
- <FlexItem alignY="end">
456
- <DemoBox>Pushed C</DemoBox>
457
- </FlexItem>
458
- </FlexColumn>
459
-
460
573
  <h4>Item centered vertically</h4>
461
574
  <FlexColumn
462
575
  gap="10px"
@@ -475,25 +588,44 @@
475
588
  </section>
476
589
 
477
590
  <section className="demo-section">
478
- <h3>16. Combined Growth and Alignment in Column</h3>
591
+ <h3>15. When to Use FlexItem Alignment</h3>
592
+ <p style={{ marginBottom: "15px", fontSize: "14px" }}>
593
+ FlexItem alignment is useful when you need exceptions to the
594
+ container's alignment:
595
+ </p>
479
596
 
480
- <FlexColumn
597
+ <h4>Example: Most items start, one pushed to end</h4>
598
+ <FlexRow
599
+ alignX="start"
481
600
  gap="10px"
482
601
  style={{
483
- height: "250px",
484
- background: "#e1f5fe",
602
+ background: "#fff8e1",
485
603
  padding: "10px",
486
604
  }}
487
605
  >
488
- <DemoBox>Fixed</DemoBox>
489
- <FlexItem grow>
490
- <DemoBox style="height: 100%; box-sizing: border-box;">
491
- Grows
492
- </DemoBox>
606
+ <DemoBox>Start</DemoBox>
607
+ <DemoBox>Start</DemoBox>
608
+ <FlexItem alignX="end">
609
+ <DemoBox>Pushed to end</DemoBox>
493
610
  </FlexItem>
494
- <FlexItem alignY="end">
495
- <DemoBox>Pushed to bottom</DemoBox>
611
+ </FlexRow>
612
+
613
+ <h4>Example: Most items aligned start, one centered</h4>
614
+ <FlexColumn
615
+ alignX="start"
616
+ gap="10px"
617
+ style={{
618
+ height: "200px",
619
+ width: "300px",
620
+ background: "#e8f5e8",
621
+ padding: "10px",
622
+ }}
623
+ >
624
+ <DemoBox>Left aligned</DemoBox>
625
+ <FlexItem alignX="center">
626
+ <DemoBox>Centered exception</DemoBox>
496
627
  </FlexItem>
628
+ <DemoBox>Left aligned</DemoBox>
497
629
  </FlexColumn>
498
630
  </section>
499
631
  </div>
package/src/components/layout/flex.jsx CHANGED
@@ -9,14 +9,12 @@ import.meta.css = /* css */ `
9
9
  .navi_flex_row {
10
10
  display: flex;
11
11
  flex-direction: row;
12
- align-items: center;
13
12
  gap: 0;
14
13
  }
15
14
 
16
15
  .navi_flex_column {
17
16
  display: flex;
18
17
  flex-direction: column;
19
- align-items: center;
20
18
  gap: 0;
21
19
  }
22
20
 
@@ -27,10 +25,13 @@ import.meta.css = /* css */ `
27
25
 
28
26
  const FlexDirectionContext = createContext();
29
27
 
30
- export const FlexRow = ({ alignY, gap, style, children, ...rest }) => {
28
+ export const FlexRow = ({ alignX, alignY, gap, style, children, ...rest }) => {
31
29
  const innerStyle = withPropsStyle(
32
30
  {
33
- alignItems: alignY,
31
+ // Only set justifyContent if it's not the default "start"
32
+ justifyContent: alignX !== "start" ? alignX : undefined,
33
+ // Only set alignItems if it's not the default "stretch"
34
+ alignItems: alignY !== "stretch" ? alignY : undefined,
34
35
  gap,
35
36
  ...consumeSpacingProps(rest),
36
37
  },
@@ -45,10 +46,20 @@ export const FlexRow = ({ alignY, gap, style, children, ...rest }) => {
45
46
  </div>
46
47
  );
47
48
  };
48
- export const FlexColumn = ({ alignX, gap, style, children, ...rest }) => {
49
+ export const FlexColumn = ({
50
+ alignX,
51
+ alignY,
52
+ gap,
53
+ style,
54
+ children,
55
+ ...rest
56
+ }) => {
49
57
  const innerStyle = withPropsStyle(
50
58
  {
51
- alignItems: alignX,
59
+ // Only set alignItems if it's not the default "stretch"
60
+ alignItems: alignX !== "stretch" ? alignX : undefined,
61
+ // Only set justifyContent if it's not the default "start"
62
+ justifyContent: alignY !== "start" ? alignY : undefined,
52
63
  gap,
53
64
  ...consumeSpacingProps(rest),
54
65
  },
@@ -75,8 +86,7 @@ export const useConsumAlignProps = (props) => {
75
86
 
76
87
  if (flexDirection === "row") {
77
88
  // In row direction: alignX controls justify-content, alignY controls align-self
78
- // Default alignY is "center" from CSS, so only set alignSelf when different
79
- if (alignY !== undefined && alignY !== "center") {
89
+ if (alignY !== undefined && alignY !== "start") {
80
90
  style.alignSelf = alignY;
81
91
  }
82
92
  // For row, alignX uses auto margins for positioning
@@ -96,8 +106,7 @@ export const useConsumAlignProps = (props) => {
96
106
  }
97
107
  } else if (flexDirection === "column") {
98
108
  // In column direction: alignX controls align-self, alignY uses auto margins
99
- // Default alignX is "center" from CSS, so only set alignSelf when different
100
- if (alignX !== undefined && alignX !== "center") {
109
+ if (alignX !== undefined && alignX !== "start") {
101
110
  style.alignSelf = alignX;
102
111
  }
103
112
  // For column, alignY uses auto margins for positioning