Flex

The Flex component provides a flexible container layout using CSS Flexbox. It supports various alignment options, direction control, wrapping, spacing, and flexible item sizing patterns. Perfect for creating responsive and flexible layouts.

Basic flex

The Flex component creates a flex container with default horizontal layout and center alignment.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Direction

Control the flex direction using the column prop for vertical layouts. Default flex direction is row.

Column direction

Items are arranged vertically from top to bottom.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex column class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Reverse direction

Use the reverse prop to reverse the order of items.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex reverse class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Column reverse

Combine column and reverse for vertical reverse layout.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex column reverse class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Justify content

Control horizontal alignment (or vertical when using column) using justify props.

Justify start

Align items to the start of the flex container.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex justify_start class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Justify end

Align items to the end of the flex container.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex justify_end class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Justify space between

Distribute items with space between them.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex justify_space class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Align items

Control vertical alignment (or horizontal when using column) using align props.

Align start

Align items to the start of the cross axis.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex align_start class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default); min-height: 150px;">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Align end

Align items to the end of the cross axis.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex align_end class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default); min-height: 150px;">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Wrapping

Control whether items wrap to new lines using the wrap prop.

No wrap (default)

Items stay on a single line and may overflow.

Item 1
Item 2
Item 3
Item 4
Item 5
Source code
<template>
  <IkFlex class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default); max-width: 300px;">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 4</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 5</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Wrap

Items wrap to new lines when they don't fit.

Item 1
Item 2
Item 3
Item 4
Item 5
Source code
<template>
  <IkFlex wrap class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default); max-width: 300px;">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 4</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 5</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Text wrapping

Use the wrap_text prop to allow text content within items to wrap normally.

Very long text that should wrap
Another item
Source code
<template>
  <IkFlex wrap_text class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default); max-width: 200px;">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Very long text that should wrap</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Another item</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Inline flex

Use the inline prop to display the flex container as an inline element.

Text before
Item 1
Item 2
Text after
Source code
<template>
  <div>
    Text before
    <IkFlex inline class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    </IkFlex>
    Text after
  </div>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Spacing

Control the gap between flex items using the spacing prop. Values range from 0 to 14.

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Source code
<template>
  <div>
    <IkFlex spacing="2" class="ik-pa-4 ik-mb-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
    </IkFlex>
    <IkFlex spacing="5" class="ik-pa-4 ik-mb-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
    </IkFlex>
    <IkFlex spacing="8" class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
      <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
    </IkFlex>
  </div>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Full width/height items

Make all flex items take full width or height of the container.

Full width items

Use full_width_items to make all items span the full width.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex column full_width_items class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Full height items

Use full_height_items to make all items span the full height.

Item 1
Item 2
Item 3
Source code
<template>
  <IkFlex full_height_items class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default); height: 200px;">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Flexible item patterns

Control how items grow and shrink using special flex patterns.

Grow and fixed children

The first item grows to fill available space, remaining items stay fixed width.

Grows
Fixed
Fixed
Source code
<template>
  <IkFlex grow_and_fixed class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Grows</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Fixed</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Fixed</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Fixed and grow children

The last item grows to fill available space, previous items stay fixed width.

Fixed
Fixed
Grows
Source code
<template>
  <IkFlex fixed_and_grow class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Fixed</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Fixed</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Grows</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>

Grow fixed grow children

The first and last items grow, the middle item stays fixed width.

Grows
Fixed
Grows
Source code
<template>
  <IkFlex grow_fixed_grow class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Grows</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Fixed</div>
    <div class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Grows</div>
  </IkFlex>
</template>
<script setup>
import { IkFlex } from '@ikol/ui-kit/components/IkFlex';
</script>
Image
IK UI
© 2025 IK UI. All rights reserved.