Description
Generate flex bases and factors with delegated initial grow or shrink expectations before min-size freezing.
An interface fixture makes content and state explicit so a consumer can test a rendering or interaction. Literal labels, modeled states, and calculated geometry remain separate from what a browser or assistive technology actually displays or announces.
Generate flex bases and factors with delegated initial grow or shrink expectations before min-size freezing.
When to use this tool
Use this generator to create reproducible flex layout stress case cases from the supplied model or bank. Inspect the returned evidence before using cases in a test or exercise.
How to use the tool and how it works
- Supply itemCount, containerWidthPx, basisPx, grow, shrink in the field shapes below. Set seed when you need an explicit replay.
- Run the tool and correct any input error. For generated controls, distinguish a successful fixture containing an invalid case from failure to generate the fixture.
- Read containerWidthPx, freeSpacePx, mode, items, remainingSpacePx. Use the conventions below. Keep answer-bearing fields separate when presenting an exercise.
Draw a container width and each item's flex basis, grow, and shrink factors. For nonnegative free space delegate grow allocation; for a deficit delegate basis-weighted shrink losses. Return signed adjustments, preliminary sizes, and undistributed space.1
Delegated operations used for this result: flex grow space distribution; flex shrink deficit proportional loss. Their calculation or parsing conventions apply to the corresponding result fields.2, 3
| Input field | Meaning and units | Accepted input |
|---|---|---|
| itemCount | Item Count | Required. Safe integer; minimum 1; maximum 32. |
| containerWidthPx | Container Width Px | Required. Object; no unknown keys. |
| containerWidthPx.minimum | Minimum | Required. Safe integer; minimum 0. |
| containerWidthPx.maximum | Maximum | Required. Safe integer; minimum 0. |
| basisPx | Basis Px | Required. Object; no unknown keys. |
| basisPx.minimum | Minimum | Required. Safe integer; minimum 0. |
| basisPx.maximum | Maximum | Required. Safe integer; minimum 0. |
| grow | Grow | Required. Object; no unknown keys. |
| grow.minimum | Minimum | Required. Safe integer; minimum 0. |
| grow.maximum | Maximum | Required. Safe integer; minimum 0. |
| shrink | Shrink | Required. Object; no unknown keys. |
| shrink.minimum | Minimum | Required. Safe integer; minimum 0. |
| shrink.maximum | Maximum | Required. Safe integer; minimum 0. |
| seed | Optional numeric seed; takes precedence over context randomness. Without either, use the fixed tool.io default seed. | Optional. Safe integer. |
| Output field | Interpretation | Returned shape |
|---|---|---|
| containerWidthPx | Container Width Px | Required. Finite number. |
| freeSpacePx | Free Space Px | Required. Finite number. |
| mode | Mode | Required. Text; one of "grow", "shrink". |
| items | Items | Required. Array of Object; no unknown keys.; minimum items 1; maximum items 32. |
| items[].basisPx | Basis Px | Required. Finite number. |
| items[].grow | Grow | Required. Finite number. |
| items[].shrink | Shrink | Required. Finite number. |
| items[].adjustmentPx | Adjustment Px | Required. Finite number. |
| items[].preliminarySizePx | Preliminary Size Px | Required. Finite number. |
| remainingSpacePx | Remaining Space Px | Required. Finite number. |
| randomness | Replay source and normalized 32-bit seed, or null seed for an advancing context source. | Required. Object; no unknown keys. |
| randomness.seed | Optional safe-integer replay seed; normalization and precedence are explained below. | Required. Safe integer. or Null. |
| randomness.source | Source | Required. Text; one of "context", "seed". |
An explicit safe-integer seed takes precedence over injected context randomness and is normalized to an unsigned 32-bit integer. With no seed and no context source, replay uses the fixed tool.io default seed. A context source must return finite values from zero inclusive to one exclusive; its advancing state must be retained separately. randomness records the source and normalized seed, or null for context. These generators are not cryptographic random sources.
{
"input": {
"itemCount": 2,
"containerWidthPx": {
"minimum": 240,
"maximum": 240
},
"basisPx": {
"minimum": 100,
"maximum": 200
},
"grow": {
"minimum": 0,
"maximum": 2
},
"shrink": {
"minimum": 1,
"maximum": 1
},
"seed": 42
},
"output": {
"containerWidthPx": 240,
"freeSpacePx": -22,
"mode": "shrink",
"items": [
{
"basisPx": 145,
"grow": 2,
"shrink": 1,
"adjustmentPx": -12.17557251908397,
"preliminarySizePx": 132.82442748091603
},
{
"basisPx": 117,
"grow": 1,
"shrink": 1,
"adjustmentPx": -9.82442748091603,
"preliminarySizePx": 107.17557251908397
}
],
"remainingSpacePx": 0,
"randomness": {
"seed": 42,
"source": "seed"
}
}
}Limitations and assumptions
- These are preliminary proportional calculations, not the complete CSS flex layout algorithm. Min/max constraints, iterative freezing, intrinsic sizing, wrapping, gaps, and actual browser rendering are omitted.
- A replay requires the same complete input and implementation. The stated sampling convention applies within its eligible space. A finite draw does not exhaust all possible outputs; repeats remain possible unless a distinct-selection rule is explicit.
- The field tables state structural bounds; cross-field constraints and bounded search or output budgets also apply. Unknown keys are rejected where the object contract disallows them. Input errors are distinct from null fields and deliberate invalid controls in a successful output.
Alternative or Complementary methods
For a supplied example, inspect the returned construction or delegated check directly. To evaluate a consumer, also test cases chosen for its own boundaries; a generated finite corpus does not establish exhaustive coverage.
References
Similar or alternative tools
- Random CSS Grid Layout Preset Generator
Generate a definite-width grid preset with delegated fixed-track fit counts and initial fr shares, excluding intrinsic browser sizing.
- Random Dashboard Widget Layout Generator
Pack supplied rectangular widgets into a cell grid with randomized bounded backtracking and validated nonoverlap placements.