A
V
Flex Width
Definition and Usage
The Flex Width utility classes are used to define how much horizontal space a flex item should occupy inside a flex container. These classes help manage layout structure without using custom widths or media queries.
Flex Full Width
The Flex Full Width utility classes control the width of flex items based on percentage values, adapting seamlessly between desktop and mobile devices.
On Desktop: Each class (FxWhFl1 to FxWhFl100) sets the width of the element from 1% to 100% of its container, depending on the class number.
On Mobile: All elements automatically expand to 100% width, stacking vertically for better readability and usability on smaller screens.
| Property | Value |
|---|---|
| FxWhFl1 | flex: 0 0 100%; max-width: 100%; |
| FxWhFl25 | flex: 0 0 100%; max-width: 100%; |
| FxWhFl33 | flex: 0 0 100%; max-width: 100%; |
| FxWhFl33o3 | flex: 0 0 100%; max-width: 100%; |
| FxWhFl50 | flex: 0 0 100%; max-width: 100%; |
| FxWhFl100 | flex: 0 0 100%; max-width: 100%; |
Note
The range of this property is from 1 to 100.
Flex Half Width
The Flex Half utility is used to create a two-column layout on desktop and a two-row layout on mobile. It is ideal for placing elements side by side on larger screens while maintaining a clean, stacked layout on smaller devices.
On Desktop: Each class (FxWhHf1 to FxWhHf50) sets the width of the element from 1% to 50% of its container, depending on the class number.
On Mobile: All elements automatically expand to 50% width, stacking vertically for better readability and usability on smaller screens.
| Property | Value |
|---|---|
| FxWhHf1 | flex: 0 0 50%; max-width: 50%; |
| FxWhHf12o5 | flex: 0 0 50%; max-width: 50%; |
| FxWhHf25 | flex: 0 0 50%; max-width: 50%; |
| FxWhFl50 | flex: 0 0 50%; max-width: 50%; |
Note
The range of this property is from 1 to 50.
Flex One Third Width
The Flex One Third utility is designed to create a three-column layout on desktop and a three-row layout on mobile. It ensures that each element occupies one-third of the container’s width on larger screens while adapting gracefully on smaller devices.
On Desktop: Each class (FxWhOeTd1 to FxWhOetd33) sets the width of the element from 1% to 33% of its container, depending on the class number.
On Mobile: All elements automatically expand to 33% width, stacking vertically for better readability and usability on smaller screens.
| Property | Value |
|---|---|
| FxWhOeTd1 | flex: 0 0 33.33%; max-width: 33.33%; |
| FxWhOeTd11o11 | flex: 0 0 50%; max-width: 50%; |
| FxWhOeTd12o5 | flex: 0 0 50%; max-width: 50%; |
| FxWhOeTd14o23 | flex: 0 0 50%; max-width: 50%; |
| FxWhOeTd16o67 | flex: 0 0 50%; max-width: 50%; |
| FxWhOeTd16o67 | flex: 0 0 50%; max-width: 50%; |
| FxWhOeTd33 | flex: 0 0 50%; max-width: 50%; |
Note
The range of this property is from 1 to 33.
Flex One Third Width
The Flex One Fourth utility enables a four-column layout on desktop and a four-row stacked layout on mobile. It’s ideal for displaying multiple equal-sized items in a responsive grid.
On Desktop: Each class (FxWh1 to FxWh25) sets the width of the element from 1% to 25% of its container, depending on the class number.
On Mobile: All elements automatically expand to 25% width, stacking vertically for better readability and usability on smaller screens.
| Property | Value |
|---|---|
| FxWhOeFh1 | flex: 0 0 25%; max-width: 25%; |
| FxWhOeFh11o11 | flex: 0 0 25%; max-width: 25%; |
| FxWhOeFh12o5 | flex: 0 0 25%; max-width: 25%; |
| FxWhOeFh25 | flex: 0 0 25%; max-width: 25%; |
Note
The range of this property is from 1 to 25.