Flex 布局

Flex 布局组件。

介绍

为了方便布局，Pure UI 提供了 Flex 布局组件。
只是默认将组件的 display 属性设置为了 flex。

基础使用

vue

<template>
	<pure-flex>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

换行

子元素默认不换行，设置 wrap 属性为 true 可以换行。

vue

<template>
	<pure-flex wrap>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

间距

子元素之间的间距可以通过 gap 属性设置，默认 8px。

vue

<template>
	<pure-flex wrap gap="10px">
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

布局方向

可以通过 direction 属性设置布局方向，默认 row，同 flex 的 flex-direction 属性。

row：水平方向，从左到右
row-reverse：水平方向，从右到左
column：垂直方向，从上到下
column-reverse：垂直方向，从下到上

vue

<template>
	<pure-flex wrap gap="10px" direction="column">
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

主轴对齐方式

可以通过 align 属性设置主轴对齐方式，默认 flex-start，同 flex 的 align-items 属性。

flex-start：主轴起点对齐
flex-end：主轴终点对齐
center：主轴居中对齐
space-between：子元素之间间距相等
space-around：子元素之间间距相等，且与容器边缘间距相等

vue

<template>
	<pure-flex wrap gap="10px" align="center">
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

交叉轴对齐方式

可以通过 justify 属性设置交叉轴对齐方式，默认 flex-start，同 flex 的 justify-content 属性。

flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴居中对齐
space-between：子元素之间间距相等
space-around：子元素之间间距相等，且与容器边缘间距相等

vue

<template>
	<pure-flex wrap gap="10px" justify="center">
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

子元素居中

可以通过 center 属性将子元素居中对齐，等同于 align-items: center; justify-content: center;

vue

<template>
	<pure-flex wrap gap="10px" center>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
		<view class="item">子元素</view>
	</pure-flex>
</template>

属性

名称	类型	默认值	说明
`wrap`	`Boolean`	`false`	子元素是否换行
`direction`	`String`	`row`	布局方式
`gap`	`String`		子元素间距
`align`	`String`		主轴对齐方式
`justify`	`String`		交叉轴对齐方式
`center`	`Boolean`	`false`	子元素是否居中

插槽

名称	参数	说明
`#default`		默认，组件内容

样式变量

名称	说明
`--pure-flex-gap`	子元素间距
`--pure-flex-direction`	布局方式
`--pure-flex-align-items`	主轴对齐方式
`--pure-flex-justify-content`	交叉轴对齐方式
`--pure-flex-wrap`	子元素是否换行

Flex 布局 ​

介绍 ​

基础使用 ​

换行 ​

间距 ​

布局方向 ​

主轴对齐方式 ​

交叉轴对齐方式 ​

子元素居中 ​

属性 ​

插槽 ​

样式变量 ​