flex:1 Shorthand Expansion
Expand exact flex:1 shorthand as interoperably used by browsers; percentage0% differs from definite0 in indefinite containers. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
The flex shorthand combines growth, shrinkage and basis components.
The flex shorthand combines growth, shrinkage and basis components.1
This tool documents the committed expansion of the single token 1 rather than parsing arbitrary shorthand. Use flex:1 Shorthand Expansion to evaluate the supplied inputs under the specific model below.
When to use flex:1 Shorthand Expansion
Use flex:1 Shorthand Expansion to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use flex:1 Shorthand Expansion and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Observed shorthand using the field table and validation rules below, then run the tool.
- Read Flex grow, Flex shrink, Flex basis token and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| observedShorthand | Observed shorthand | string | Required; constraints below |
Enter exactly the string 1. The committed implementation returns grow 1, shrink 1 and basis 0%. That exact percentage basis is material in an indefinite container; this tool performs only its stored shorthand expansion and does not calculate flex item size.
flex:1 → grow=1, shrink=1, basis=0% Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| flexGrow | Flex grow | number |
| flexShrink | Flex shrink | number |
| flexBasisToken | Flex basis token | string |
{
"input": {
"observedShorthand": "1"
},
"output": {
"flexGrow": 1,
"flexShrink": 1,
"flexBasisToken": "0%"
}
}Limitations and assumptions
A zero percentage flex basis can behave differently from a zero length in an indefinite container. This tool’s returned value is specifically 0%.2
This tool documents the committed expansion of the single token 1 rather than parsing arbitrary shorthand. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use flex:none Shorthand Expansion for a related task: Flex none selects an inflexible automatic basis under its shorthand expansion.
Use Transition Total Duration Multi-Property Sum for a related task: Concurrent transitions complete at their latest active end time.
References
-
flex:1 Shorthand Expansion — tool.io
Similar or alternative tools
- flex:none Shorthand Expansion
Flex none selects an inflexible automatic basis under its shorthand expansion.
- Transition Total Duration Multi-Property Sum
Concurrent transitions complete at their latest active end time.