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>

:::