Utilities

Flex Basis

The Flex Basis utility determines the initial main size of a flex item along its main axis within a flex container. This utility is crucial for setting the starting point of a flex item's size before it adjusts to fit in the available space.

Utility Class
USS Properties
flex-basis-0
flex-basis: 0px;
flex-basis-1
flex-basis: 4px;
flex-basis-2
flex-basis: 8px;
flex-basis-3
flex-basis: 12px;
flex-basis-4
flex-basis: 16px;
flex-basis-5
flex-basis: 20px;
flex-basis-6
flex-basis: 24px;
flex-basis-7
flex-basis: 28px;
flex-basis-8
flex-basis: 32px;
flex-basis-9
flex-basis: 36px;
flex-basis-10
flex-basis: 40px;
flex-basis-11
flex-basis: 44px;
flex-basis-12
flex-basis: 48px;
flex-basis-14
flex-basis: 56px;
flex-basis-16
flex-basis: 64px;
flex-basis-20
flex-basis: 80px;
flex-basis-24
flex-basis: 96px;
flex-basis-28
flex-basis: 112px;
flex-basis-32
flex-basis: 128px;
flex-basis-36
flex-basis: 144px;
flex-basis-40
flex-basis: 160px;
flex-basis-44
flex-basis: 176px;
flex-basis-48
flex-basis: 192px;
flex-basis-52
flex-basis: 208px;
flex-basis-56
flex-basis: 224px;
flex-basis-60
flex-basis: 240px;
flex-basis-64
flex-basis: 256px;
flex-basis-72
flex-basis: 288px;
flex-basis-80
flex-basis: 320px;
flex-basis-96
flex-basis: 384px;
flex-basis-px
flex-basis: 1px;
flex-basis-0point5
flex-basis: 2px;
flex-basis-1point5
flex-basis: 6px;
flex-basis-2point5
flex-basis: 10px;
flex-basis-3point5
flex-basis: 14px;
flex-basis-auto
flex-basis: auto;
flex-basis-1of2
flex-basis: 50%;
flex-basis-1of3
flex-basis: 33.333333%;
flex-basis-2of3
flex-basis: 66.666667%;
flex-basis-1of4
flex-basis: 25%;
flex-basis-2of4
flex-basis: 50%;
flex-basis-3of4
flex-basis: 75%;
flex-basis-1of5
flex-basis: 20%;
flex-basis-2of5
flex-basis: 40%;
flex-basis-3of5
flex-basis: 60%;
flex-basis-4of5
flex-basis: 80%;
flex-basis-1of6
flex-basis: 16.666667%;
flex-basis-2of6
flex-basis: 33.333333%;
flex-basis-3of6
flex-basis: 50%;
flex-basis-4of6
flex-basis: 66.666667%;
flex-basis-5of6
flex-basis: 83.333333%;
flex-basis-1of12
flex-basis: 8.333333%;
flex-basis-2of12
flex-basis: 16.666667%;
flex-basis-3of12
flex-basis: 25%;
flex-basis-4of12
flex-basis: 33.333333%;
flex-basis-5of12
flex-basis: 41.666667%;
flex-basis-6of12
flex-basis: 50%;
flex-basis-7of12
flex-basis: 58.333333%;
flex-basis-8of12
flex-basis: 66.666667%;
flex-basis-9of12
flex-basis: 75%;
flex-basis-10of12
flex-basis: 83.333333%;
flex-basis-11of12
flex-basis: 91.666667%;
flex-basis-full
flex-basis: 100%;

Implementing Flex Basis in UXML

Fixed Size Flex Basis

Classes like flex-basis-4 set the item's initial size to a specific value (in this case, 16px).

<ui:VisualElement class="flex-basis-4">
    <!-- Element with an initial fixed size of 16px -->
</ui:VisualElement>

Percentage Sizes

Classes like flex-basis-1of2 set the item's initial size to a percentage of its container's size.

<ui:VisualElement class="flex-basis-1of2">
    <!-- Element with an initial size of 50% of its container -->
</ui:VisualElement>

Auto

flex-basis-auto sizes the item based on its content's natural size.

<ui:VisualElement class="flex-basis-auto">
    <!-- Element with an initial size based on its content -->
</ui:VisualElement>

Customize

Modifier Variations

Modifier Variations

You can customize which modifier variations of the Flex Basis utility are generated, such as pseudo-classes (e.g., hover, focus) and custom modifiers.

By default, no modifier variations are defined for the Flex Basis utility.

By fine-tuning the utility variations, you maintain control over your stylesheet's size and complexity, ensuring that only necessary styles are included. To update these values:

  1. Open the Theme Config Asset: Find the asset within your Unity project.
  2. Navigate to the 'Utilities' Section: Locate the Flex Basis utility.
  3. Adjust Modifier Variations: Select which modifiers you want to be generated for the utility. Keep in mind that the order of the modifiers will affect the order and specificity of the generated USS classes.

Class Tags and Properties

Class Tags and Properties

The Flex Basis utility generates classes based on predefined tags and their associated USS properties. While we recommend keeping these defaults for consistency and ease of reference in our documentation, you have the option to customize them to suit your project's specific needs.

These values are prepended to the defined values in this format tag-{value}. If a tag is empty, the generated class will simply be the value by itself.

Here are the default tags and the USS properties they set for the Flex Basis utility:

  • flex-basis : flex-basis

To customize these tags and properties, you can edit the Tag Property Map field for the Flex Basis utility in the Theme Config asset. This allows you to define new tags or modify existing ones, thus tailoring the generated classes to your preferences.

Extending Core Fields

The Flex Basis utility uses values from the following fields from the Core section of the Theme Config asset:

  • Spacing
These fields are used in addition to any custom values defined for the utility. If the same key exists in both the utility and core configurations, the utility's values will override those from the core.

To customize or define these extended fields:

  1. Open the Theme Config Asset: Locate the asset within your Unity project.
  2. Navigate to the 'Utilities' Section: Find the Flex Basis utility.
  3. Customize Extend Fields: Modify or add fields in the Extend Fields array to change the core configuration values that are extended. You'll only be able to extend fields of the same type.

Disable Utility

The Flex Basis utility is enabled by default. You can disable it by unchecking the Enabled option in the Theme Config asset. This will prevent the generation of the utility's styles.

Previous
Flex
Next
Flex Direction