Flex

Storybook

Examples

Child Items with the same width

The child items are by default the same width. This is the default setting. Even if you set the width for a child item, it will be still overridden by the flex container.

<vega-flex 
    gap="size-8" 
>
     <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 1</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 2</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 3</div>
</vega-flex>

Child Items with a different width

If child items have a different width, use the following steps:

  1. Set the width for the child item
  2. Add the attribute class="v-min-w-min vega-flex-shrink-0" to the child item. 
<vega-flex
    gap='size-8'
>
    <div class="v-bg-action text-inverted-primary v-w-size-40 v-min-w-min vega-flex-shrink-0">Child Item 1</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 2</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 3</div>
</vega-flex>

Combination

<!--
    this vega-flex defines a two columns of layout. The width of first column is fixed.
    And flex-direction will be changed to row when page size is under "lg"
-->
<vega-flex gap="size-8">
    <div class="v-bg-action text-inverted-primary v-w-size-40 v-bg-action vega-flex-shrink-0">Child Item 1</div>
    <div>
        <!--
            this vega-flex defines  three columns of layout. The with of all child items are the same (33.3%).
            And flex-direction will be changed to row when page size is under "size-8"
        -->
        <vega-flex gap="size-8">
            <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 2</div>
            <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 3</div>
            <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 4</div>
        </vega-flex>
    </div>
</vega-flex>

Align and Justify

<vega-flex align-item="center" justify-content="space-between">
  <div class="v-bg-action text-inverted-primary v-h-size-112 v-w-size-80 v-min-w-min vega-flex-shrink-0">Child 1</div>
  <div class="v-bg-action  text-inverted-primary v-h-size-112 v-w-size-80 v-min-w-min vega-flex-shrink-0">Child 2</div>
  <div class="v-bg-action text-inverted-primary v-h-size-48 v-w-size-80 v-min-w-min vega-flex-shrink-0">Child 3</div>
</vega-flex>

Usage

The vega-flex component is to be used as a wrapper for implementations of CSS Flexbox. This enables a column-based layout, with columns set at the same or varying widths.

Properties

Name Description Default
gap This specification defines the space in between column elements. The value can be set to ResponsiveType or token size
margin This specifies the margin for the flex container. It can be set as ResponsiveType or any token size
breakpoint This specifies the breakpoint where flex direction is changed between rows and columns when a screen size changes. When the page is resized, the width of all child items will be equal to 100% of the container. NOTE: Deprecated. Please use direction instead. S
direction The direction of child items include col and row. Note: VegaFlex#breakpoint is deprecated and VegaFlex#direction will take effect regardless of the value of breakpoint.
row, col, row-reverse, col-reverse		 row
align-item Controls the alignment of items. start, center, end
justify-content Control the space between and around content items
use-native-flex This will convert vega-flex to use native-based flex behavior. When using this mode, vega-flex will not be column-based, and child items will not have the same default width. As the default value is true, please use the following FeatureFlag, VEGA_FLEX.USE_NATIVE_FLEX_BEHAVIOR to disable it. Note: when useNativeFlex is set to true, the breakpoint will not be effective. In this case, set breakpoint to be None and instead use direction.
boolean		 true

Example Properties

<vega-flex
    gap='size-8|12|16 etc | {default: size-12, M: size-16, ...}.'
	margin='size-8|12|16 etc | {default: size-12, M: {top: size-16, bottom: size-16,...}, ...}.'
    breakpoint='M|L|XL etc'
>
    <div>Child Item 1</div>
    <div>Child Item 2</div>
</vega-flex>

For more details, view in Storybook.

Accessibility

  • Ensures every id attribute value is unique.

Best Practices

The vega-flex layout pattern is best used when you need to make sure your alignment remains consistent in a responsive way. It will ensure that your designs will adapt to mobile environments.

  • Flex is ideal for use when you have a small design to implement, where you only have a few rows or columns.
  • Flex will work well if you need your elements to align properly.
  • It is also best used for content-driven design patterns.

However, flex is not ideal for all situations, where you might consider using a grid layout. These include:

  • Complex layouts.
  • There needs to be a gap between block elements.
  • Elements need to overlap.
  • If layout is more important than content, grid is a better option than using flex.