Space

🌏 Translated with the assistance of DeepSeek and ChatGPT

A component for adding spacing between multiple elements arranged together.

Basic Usage

Prevent elements from sticking together.

Submit this order?

<template>
	<px-space>
		Submit this order?
		<px-button>Confirm</px-button>
		<px-button theme="info">Cancel</px-button>
	</px-space>
</template>

Spacing Size

Set the spacing size via the margin property. Supports small, medium, large, or custom values and objects.

Small

Medium

Large

16px

x: 8px, y: 4px

<template>
	<h4>Small</h4>
	<px-space margin="small">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>Medium</h4>
	<px-space>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>Large</h4>
	<px-space margin="large">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>16px</h4>
	<px-space :margin="16">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>x: 8px, y: 4px</h4>
	<px-space :margin="{ x: 8, y: 4 }" style="width: 320px">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
</template>
<style lang="css" scoped>
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
</style>

Spacing Direction

Set the arrangement direction via the direction property. Supports horizontal and vertical.

Horizontal

Vertical

<template>
	<h4>Horizontal</h4>
	<px-space>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>Vertical</h4>
	<px-space direction="vertical">
		<px-button block>Content</px-button>
		<px-button block>Content</px-button>
		<px-button block>Content</px-button>
		<px-button block>Content</px-button>
	</px-space>
</template>
<style lang="css" scoped>
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
</style>

Main-axis Alignment

The justify property of Space sets the main-axis alignment.

Flex Start

Content

Content

Content

Content

Flex End

Content

Content

Content

Content

Center

Content

Content

Content

Content

Space Between

Content

Content

Content

Content

Space Around

Content

Content

Content

Content

Space Evenly

Content

Content

Content

Content

<template>
	<h4>Flex Start</h4>
	<px-space justify="start">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Flex End</h4>
	<px-space justify="end">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Center</h4>
	<px-space justify="center">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Space Between</h4>
	<px-space justify="space-between">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Space Around</h4>
	<px-space justify="space-around">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Space Evenly</h4>
	<px-space justify="space-evenly">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
</template>
<style lang="css" scoped>
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 8px;
}
.px-space {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-space:last-of-type {
	margin-bottom: 0px;
}
.px-space :deep(.px-space-item):nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-space :deep(.px-space-item):nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Cross-axis Alignment

The align property of Space sets the cross-axis alignment.

Center

Content

Content

Content

Content

Flex Start

Content

Content

Content

Content

Flex End

Content

Content

Content

Content

Stretch

Content

Content

Content

Content

<template>
	<h4>Center</h4>
	<px-space align="center">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Flex Start</h4>
	<px-space align="start">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Flex End</h4>
	<px-space align="end">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Stretch</h4>
	<px-space align="stretch">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
</template>
<style lang="css" scoped>
.item {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 8px;
}
.px-space {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-space:last-of-type {
	margin-bottom: 0px;
}
.px-space :deep(.px-space-item):nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-space :deep(.px-space-item):nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
	min-height: 64px;
}
</style>

API

SpaceProps

Attribute	Type	Optional	Default	Description	Version
margin	'small' | 'medium' | 'large' | number | { x?: number; y?: number }	True	'medium'	Spacing size, can also be a number or object.	0.0.0-beta
direction	'horizontal' | 'vertical'	True	'horizontal'	Direction of spacing arrangement, horizontal or vertical.	0.0.0-beta
justify	'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly'	True	'start'	Main-axis alignment, based on CSS justify-content properties.	0.0.0-beta
align	'start' | 'center' | 'end' | 'stretch'	True		Cross-axis alignment, based on the CSS align-items property. Defaults to 'center' when direction is 'horizontal', and to 'stretch' when direction is 'vertical'.	0.0.0-beta
wrap	boolean	True	true	Whether to wrap automatically.	0.0.0-beta
inline	boolean	True	false	Whether to use inline layout.	0.0.0-beta

SpaceSlots

Slot	Parameter	Description	Version
default		The Space's content.	0.0.0-beta