跳到主要内容

Row flex横向

这是用于快速横向布局的组件

示例

import { Column, Row, Text } from '@/duxui'

const Child = () => {

return list.map(item => <Column key={item} className='p-2 bg-white' style={{ height: 24 * item }}>
<Text>内容{item}</Text>
</Column>)
return
}

<Row className='gap-2'>
<Child />
</Row>

<Row items='center' className='gap-2'>
<Child />
</Row>

<Row items='start' className='gap-2'>
<Child />
</Row>

Props

继承自Taro的View Props

在RN端不完全继承

wrap

是否自动换行 相当于 flex-wrap: wrap

类型必填默认值
booleanfalse

items

align-items 的封装

类型必填默认值
enum('start', 'end', 'center', 'baseline', 'stretch')stretch

justify

justify-content 的封装

类型必填默认值
enum('start', 'end', 'center', 'between', 'around')start

grow

设置为true相当于 flex: 1

类型必填默认值
booleanfalse

shrink

设置为true相当于 flex-shrink: 0

类型必填默认值
booleanfalse

self

align-self 的封装

类型必填默认值
enum('start', 'end', 'center', 'baseline', 'stretch')