Flex 弹性布局

基于 Flex Box 布局封装的组件，可以帮助使用者方便、快捷的构建弹性布局

使用指南

由于小程序的限制 Flex 组件只能通过样式来完成，需要在 app.js 上添加以下这段代码

:::demo

1. if (process.env.TARO_ENV === "weapp") {
2. require("taro-ui/dist/weapp/css/index.css")
3. } else if (process.env.TARO_ENV === "h5") {
4. require("taro-ui/dist/h5/css/index.css")
5. }

:::

一般用法

:::demo

1. <View className='at-row'>
2. <View className='at-col'>A</View>
3. <View className='at-col'>B</View>
4. <View className='at-col'>C</View>
5. </View>

:::

使用栅格化（长度）

:::demo

1. <View className='at-row'>
2. <View className='at-col at-col-3'>A</View>
3. <View className='at-col at-col-6'>B</View>
4. <View className='at-col at-col-2'>C</View>
5. <View className='at-col at-col-1'>D</View>
6. </View>

:::

使用栅格化（偏移）

:::demo

1. <View className='at-row'>
2. <View className='at-col at-col-offset--2'>
3. A
4. </View>
5. <View className='at-col at-col-offset--3'>
6. B
7. </View>
8. <View className='at-col'>C</View>
9. </View>

:::

超出换行

:::demo

1. <View className='at-row at-row--wrap'>
2. <View className='at-col at-col-4'>A</View>
3. <View className='at-col at-col-4'>B</View>
4. <View className='at-col at-col-4'>C</View>
5. <View className='at-col at-col-4'>D</View>
6. <View className='at-col at-col-4'>E</View>
7. </View>

:::

宽度根据内容撑开

:::demo

1. <View className='at-row'>
2. <View className='at-col at-col-1 at-col--auto'>
3. 被内容撑开
4. </View>
5. <View className='at-col'>B</View>
6. </View>

:::

内容自动换行

:::demo

1. <View className='at-row'>
2. <View className='at-col at-col-1 at-col--wrap'>
3. 内容自动换行
4. </View>
5. <View className='at-col'>B</View>
6. </View>

:::

侧轴方向的对齐方式

:::demo

1. <View className='at-row'>
2. <View style='height:100px' className='at-col'>A</View>
3. <View className='at-col'>默认对齐方式 -- stretch</View>
4. </View>
5. <View className='at-row at-row__align--start'>
6. <View style='height:100px' className='at-col'>B</View>
7. <View className='at-col'>顶部对齐 -- start</View>
8. </View>
9. <View className='at-row at-row__align--center'>
10. <View style='height:100px' className='at-col'>C</View>
11. <View className='at-col'>居中对齐 -- center</View>
12. </View>
13. <View className='at-row at-row__align--end'>
14. <View style='height:100px' className='at-col'>D</View>
15. <View className='at-col'>底部对齐 -- end</View>
16. </View>

:::

主轴方向的排列方式

:::demo

1. <View className='at-row'>
2. <View className='at-col at-col-5'>默认</View>
3. <View className='at-col at-col-5'>Start</View>
4. </View>
5. <View className='at-row at-row__justify--end'>
6. <View className='at-col at-col-5'>底部排列</View>
7. <View className='at-col at-col-5'>End</View>
8. </View>
9. <View className='at-row at-row__justify--center'>
10. <View className='at-col at-col-5'>居中排列</View>
11. <View className='at-col at-col-5'>Center</View>
12. </View>
13. <View className='at-row at-row__justify--between'>
14. <View className='at-col at-col-5'>左右排列</View>
15. <View className='at-col at-col-5'>Between</View>
16. </View>
17. <View className='at-row at-row__justify--around'>
18. <View className='at-col at-col-5'>平均排列</View>
19. <View className='at-col at-col-5'>Around</View>
20. </View>

:::