Flex 栅格 Row

基于 CSS Flex 布局的栅格组件，提供响应式布局，让页面适配不同屏宽更轻松。

基础使用

Row 组件把内容区域等分为 24 份。

Span 24 | Width 100%

Span 12 | Width 50%

Span 8 | Width 33.3333%

Span 6 | Width 25%

Span 4 | Width 16.6667%

<template>
	<px-row>
		<px-col :span="24"><div class="item">Span 24 | Width 100%</div></px-col>
		<px-col :span="12"><div class="item">Span 12 | Width 50%</div></px-col>
		<px-col :span="12"><div class="item">Span 12 | Width 50%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
	</px-row>
</template>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

栅格尺寸

Col 的 span 属性设置栅格宽度。'xs'、'sm'、'md'、'lg'、'xl'、'xxl' 分别对应 $[0, 576]$ 、 $(576, 768]$ 、 $(768, 992]$ 、 $(992, 1200]$ 、 $(1200, 1600]$ 、 $(1600, +\infty]$ 的窗口像素宽度。

Span 6 | Width 25%

Responsive

<template>
	<px-row>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
	</px-row>
	<px-row>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
	</px-row>
</template>
<script setup lang="ts">
const span = {
	xxl: 4,
	xl: 6,
	lg: 8,
	md: 12,
	sm: 12,
	xs: 24
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

栅格偏移

Col 的 offset 属性设置栅格宽度。同样地，支持响应式。

Span 6 | Offset 6

Span 8 | Offset 4

Span 6 | Offset Responsive

<template>
	<px-row>
		<px-col :span="6" :offset="6"><div class="item">Span 6 | Offset 6</div></px-col>
		<px-col :span="8" :offset="4"><div class="item">Span 8 | Offset 4</div></px-col>
	</px-row>
	<px-row>
		<px-col :span="6" :offset="offset"
			><div class="item">Span 6 | Offset Responsive</div></px-col
		>
	</px-row>
</template>
<script setup lang="ts">
const offset = {
	xxl: 18,
	xl: 12,
	lg: 8,
	md: 6,
	sm: 4,
	xs: 0
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

栅格间隔

Row 的 gutter 属性设置栅格宽度。同样地，支持响应式。

x: 4px, y: 4px

Content

x: 8px, y: 4px

Content

Responsive

Content

<template>
	<h4>x: 4px, y: 4px</h4>
	<px-row :gutter="4">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>x: 8px, y: 4px</h4>
	<px-row :gutter="{ x: 8, y: 4 }">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Responsive</h4>
	<px-row :gutter="gutter">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
</template>
<script setup lang="ts">
const gutter = {
	xxl: 24,
	xl: 16,
	lg: 12,
	md: 8,
	sm: 4,
	xs: 2
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

横向排列

Row 的 justify 属性设置横向排列方式。

Flex Start

Content

Flex End

Content

Center

Content

Space Between

Content

Space Around

Content

Space Evenly

Content

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

纵向排列

Row 的 align 属性设置纵向排列方式。

Flex Start

Content

Flex End

Content

Center

Content

Stretch

Content

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

API

RowProps

属性	类型	可选	默认值	描述	版本
gutter	`number \| { x?: number; y?: number } \| Value4DeviceWidth<number \| { x?: number; y?: number }>`	是	`0`	子组件 Col 之间的间隔。	0.0.0-beta
justify	`'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between' \| 'space-evenly'`	是	`'start'`	Row 的横向排列方式，基于 CSS `justify-content` 属性。	0.0.0-beta
align	`'start' \| 'center' \| 'end' \| 'stretch'`	是	`'start'`	Row 的纵向排列方式，基于 CSS `align-items` 属性。	0.0.0-beta
wrap	`boolean`	是	`true`	子组件 Col 是否可以换行。	0.0.0-beta

RowSlots

插槽	参数	描述	版本
default		子组件 Col。	0.0.0-beta

ColProps

属性	类型	可选	默认值	描述	版本
offset	`number \| ValueWithDeviceWidth<number>`	是	`0`	Col 左侧偏移。	0.0.0-beta
span	`number \| ValueWithDeviceWidth<number>`	是	`24`	Col 宽度。	0.0.0-beta

ColSlots

插槽	参数	描述	版本
default		Col 内容。	0.0.0-beta

ValueWithDeviceWidth

enum SCREEN_SIZE_TYPE {
	XS = 'xs',
	SM = 'sm',
	MD = 'md',
	LG = 'lg',
	XL = 'xl',
	XXL = 'xxl'
}

type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>

Flex 栅格 Row ​

基础使用 ​

栅格尺寸 ​

栅格偏移 ​

栅格间隔 ​

x: 4px, y: 4px

x: 8px, y: 4px

Responsive

横向排列 ​

Flex Start

Flex End

Center

Space Between

Space Around

Space Evenly

纵向排列 ​

Flex Start

Flex End

Center

Stretch

API ​

RowProps ​

RowSlots ​

ColProps ​

ColSlots ​

ValueWithDeviceWidth ​

Flex 栅格 Row

基础使用

栅格尺寸

栅格偏移

栅格间隔

横向排列

纵向排列

API

RowProps

RowSlots

ColProps

ColSlots

ValueWithDeviceWidth