Flex
A layout component for flexbox-based arrangements. Controls direction, alignment, justification, wrapping, and gap spacing via props.
Usage
One
Two
Three
<div class="flex gap-md">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>import { Flex } from '@mrmartineau/zui/react'
<Flex gap="md">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex>---
import { Flex } from '@mrmartineau/zui/astro'
---
<Flex gap="md">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex>import { Flex } from '@mrmartineau/zui/solid'
<Flex gap="md">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex><script lang="ts">
import { Flex } from '@mrmartineau/zui/svelte'
</script>
<Flex gap="md">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex><template>
<Flex gap="md">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex>
</template>
<script setup>
import { Flex } from '@mrmartineau/zui/vue'
</script>Direction
One
Two
Three
<div class="flex flex-column gap-sm">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div><Flex direction="column" gap="sm">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex><Flex direction="column" gap="sm">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex>import { Flex } from '@mrmartineau/zui/solid'
<Flex direction="column" gap="sm">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex><script lang="ts">
import { Flex } from '@mrmartineau/zui/svelte'
</script>
<Flex direction="column" gap="sm">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex><template>
<Flex direction="column" gap="sm">
<div>One</div>
<div>Two</div>
<div>Three</div>
</Flex>
</template>
<script setup>
import { Flex } from '@mrmartineau/zui/vue'
</script>Alignment & Justification
Start
End
<div class="flex items-center justify-between gap-md" style="min-height: 80px;">
<div>Start</div>
<div>End</div>
</div><Flex align="center" justify="between" gap="md" style={{ minHeight: 80 }}>
<div>Start</div>
<div>End</div>
</Flex><Flex align="center" justify="between" gap="md" style="min-height: 80px;">
<div>Start</div>
<div>End</div>
</Flex>import { Flex } from '@mrmartineau/zui/solid'
<Flex align="center" justify="between" gap="md" style={{ "min-height": "80px" }}>
<div>Start</div>
<div>End</div>
</Flex><script lang="ts">
import { Flex } from '@mrmartineau/zui/svelte'
</script>
<Flex align="center" justify="between" gap="md" style="min-height: 80px;">
<div>Start</div>
<div>End</div>
</Flex><template>
<Flex align="center" justify="between" gap="md" style="min-height: 80px;">
<div>Start</div>
<div>End</div>
</Flex>
</template>
<script setup>
import { Flex } from '@mrmartineau/zui/vue'
</script>Wrapping
A
B
C
D
E
F
<div class="flex flex-wrap gap-sm">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div><Flex wrap="wrap" gap="sm">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex><Flex wrap="wrap" gap="sm">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex>import { Flex } from '@mrmartineau/zui/solid'
<Flex wrap="wrap" gap="sm">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex><script lang="ts">
import { Flex } from '@mrmartineau/zui/svelte'
</script>
<Flex wrap="wrap" gap="sm">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex><template>
<Flex wrap="wrap" gap="sm">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex>
</template>
<script setup>
import { Flex } from '@mrmartineau/zui/vue'
</script>Inline display
Text with inlineflex content.
<p>Text with <span class="inline-flex items-center gap-2xs"><span class="zui-badge">inline</span><span class="zui-badge">flex</span></span> content.</p><p>Text with <Flex display="inline" align="center" gap="2xs"><Badge>inline</Badge><Badge>flex</Badge></Flex> content.</p><p>Text with <Flex display="inline" align="center" gap="2xs"><Badge>inline</Badge><Badge>flex</Badge></Flex> content.</p>import { Flex } from '@mrmartineau/zui/solid'
import { Badge } from '@mrmartineau/zui/solid'
<p>Text with <Flex display="inline" align="center" gap="2xs"><Badge>inline</Badge><Badge>flex</Badge></Flex> content.</p><script lang="ts">
import { Flex, Badge } from '@mrmartineau/zui/svelte'
</script>
<p>Text with <Flex display="inline" align="center" gap="2xs"><Badge>inline</Badge><Badge>flex</Badge></Flex> content.</p><template>
<p>Text with <Flex display="inline" align="center" gap="2xs"><Badge>inline</Badge><Badge>flex</Badge></Flex> content.</p>
</template>
<script setup>
import { Flex } from '@mrmartineau/zui/vue'
import { Badge } from '@mrmartineau/zui/vue'
</script>Independent axis gaps
Use gapX and gapY for different horizontal and vertical spacing.
A
B
C
D
E
F
<div class="flex flex-wrap gapx-xl gapy-2xs">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</div><Flex wrap="wrap" gapX="xl" gapY="2xs">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex><Flex wrap="wrap" gapX="xl" gapY="2xs">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex>import { Flex } from '@mrmartineau/zui/solid'
<Flex wrap="wrap" gapX="xl" gapY="2xs">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex><script lang="ts">
import { Flex } from '@mrmartineau/zui/svelte'
</script>
<Flex wrap="wrap" gapX="xl" gapY="2xs">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex><template>
<Flex wrap="wrap" gapX="xl" gapY="2xs">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
</Flex>
</template>
<script setup>
import { Flex } from '@mrmartineau/zui/vue'
</script>Props
| Prop | Values | Default |
|---|---|---|
display |
flex, inline |
flex |
direction |
row, rowReverse, column, columnReverse |
— |
align |
start, end, center, baseline, stretch |
— |
justify |
start, end, center, between, around |
— |
wrap |
wrap, nowrap, wrapReverse |
— |
gap |
0, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl |
— |
gapX |
0, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl |
— |
gapY |
0, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl |
— |