Flex Basis
The flex-basis property in CSS defines the initial size of a flex item before any space is distributed based on flex-grow or removed due to flex-shrink.
It acts as the starting point for space calculations in Flexbox.
This property is only applicable in Flexbox, not in CSS Grid.
Flex Basis in Workmaster
In Workmaster, the Flex Basis property determines the initial width (or height in a column layout) of a widget inside a Flex Container, before any growing or shrinking takes place.
To use Flex Basis, the parent container must have its Display set to Flex.
Possible Values
Any number
px
A fixed, absolute size.
Any number
rem
Relative to the root element’s font size (usually 16px by default).
Any number
%
Relative to the parent element’s size (width, height, etc.).
Any number
vw
Relative to the width of the viewport.
Any number
vh
Relative to the height of the viewport.
No number required
auto
Automatically adjusts based on content or context.
No number required
unset
Resets the property to its initial or inherited value
Examples
Initial Layout with Three Widgets
Consider a Flex Container with three widgets.
1. Flex Basis: auto
Widget A:
Flex Basis: autoWidget B:
Flex Basis: autoWidget C:
Flex Basis: auto
Each widget sizes itself based on its content or any set width.
2. Flex Basis: Fixed Values
Widget A:
Flex Basis: 400pxWidget B:
Flex Basis: 300pxWidget C:
Flex Basis: 600px
Widgets take up exactly the specified space before any remaining room is distributed or removed.
3. Combined with Flex Grow and Shrink
When used with Flex Grow and Flex Shrink, Flex Basis becomes the reference size:
Widget A:
Flex Basis: 100pxandFlex Grow: 1Widget B:
Flex Basis: 100pxandFlex Grow: 2Widget C:
Flex Basis: 700px
Both Widget A and B start at 100px, but Widget B grows to take twice the remaining space as Widget A.
Last updated