CSpacer
A functional component that expands to fill available space in a flex container. Use it inside CRow or any flex layout to push adjacent content to opposite ends.
Examples
Toolbar, article header, and paginator — three common patterns where CSpacer distributes space between elements.
Dashboard
DocsBlog
JD
Jane Doe
June 20, 2026
Page 3 of 12
Show code
vue
<template>
<!-- Toolbar: logo left, links + button right -->
<c-row align="center" no-gutter>
<div class="d-flex items-center gap-2">
<c-icon name="fas:bolt" source="fa" />
Dashboard
</div>
<c-spacer />
<div class="d-flex gap-3">
<span>Docs</span>
<button>Sign In</button>
</div>
</c-row>
<!-- Article header: avatar + name left, actions right -->
<c-row align="center" no-gutter>
<div><!-- avatar --></div>
<div>Jane Doe</div>
<c-spacer />
<div class="d-flex gap-2">
<button><c-icon name="fas:bookmark" source="fa" /></button>
<button><c-icon name="fas:heart" source="fa" /></button>
</div>
</c-row>
<!-- Pagination: prev left, page center, next right -->
<c-row align="center" no-gutter>
<button><c-icon name="fas:arrow-left" source="fa" /> Prev</button>
<c-spacer />
<span>Page 3 of 12</span>
<c-spacer />
<button>Next <c-icon name="fas:arrow-right" source="fa" /></button>
</c-row>
</template>How it works
CSpacer renders a <div class="c-spacer"> with flex-grow: 1 !important, which causes it to grow and consume free space in the row.
Props
CSpacer has no props.
Slots
CSpacer has no slots.
CSS variables
CSpacer does not define its own CSS variables.