移动开发平台 mPaaS Flexbox 弹性盒子

By | 2021年4月23日
0 Comment

Flexbox 弹性盒子文档介绍了使用该组件的不同方式以及 API 文档：

  • 在 Kylin 工程中使用该组件。
  • 在其他工程中使用，需通过 ESModule 的方式来导入组件。
  • API 文档 提供了 props、slots 的接口信息。

此外，要查看该组件的视觉效果及示例代码，请参考本文 Demo。

Kylin

  
    
   
  1. <dependency component="{ Flexbox, FlexboxItem }" src="@alipay/antui-vue" ></dependency>
    2.

ESModule

  
    
   
  1. import { Flexbox, FlexboxItem } from '@alipay/antui-vue';
    2.

API 文档

Flexbox

props

属性 说明 类型 默认值
direction 子元素的排列方式，可选row,row-reverse,column,column-reverse String 'row'
wrap 子元素的换行方式，可选nowrap,wrap,wrap-reverse String 'nowrap'
justify 子元素在主轴上的对齐方式，可选start,end,center,between,around String 'start'
align 子元素在交叉轴上的对齐方式，可选start,center,end,baseline,stretch String 'center'
alignContent 有多根轴线时的对齐方式，可选start,end,center,between,around,stretch String 'stretch'

slots

name 说明 scope
– 默认 slot, 填充布局内部内容 –

FlexboxItem

props

FlexboxItem 组件默认加上了样式flex: 1,保证所有 item 平均分宽度, Flexbox 容器的 children 不一定是 FlexboxItem

slots

name 说明 scope
– 默认 slot, 填充元素内部内容 –

Demo

基础样式

截图

代码

  
    
   
  1. <template>
    2. 
   
  2.  <div>
    3. 
   
  3.  <Flexbox>
    4. 
   
  4.  <FlexboxItem>2列</FlexboxItem>
    5. 
   
  5.  <FlexboxItem>2列</FlexboxItem>
    6. 
   
  6.  </Flexbox>
    7. 
   
  7.  <Flexbox>
    8. 
   
  8.  <FlexboxItem>3列</FlexboxItem>
    9. 
   
  9.  <FlexboxItem>3列</FlexboxItem>
    10. 
   
  10.  <FlexboxItem>3列</FlexboxItem>
    11. 
   
  11.  </Flexbox>
    12. 
   
  12.  <Flexbox>
    13. 
   
  13.  <div class="placeholder">定宽 70px</div>
    14. 
   
  14.  <FlexboxItem>自适应</FlexboxItem>
    15. 
   
  15.  </Flexbox>
    16. 
   
  16.  <Flexbox>
    17. 
   
  17.  <FlexboxItem>3</FlexboxItem>
    18. 
   
  18.  <FlexboxItem class="am-ft-ellipsis">自定义个性化</FlexboxItem>
    19. 
   
  19.  <FlexboxItem>3</FlexboxItem>
    20. 
   
  20.  </Flexbox>
    21. 
   
  21.  </div>
    22. 
   
  22. </template>
    23. 
   
    24. 
   
  24. <style lang="less" rel="stylesheet/less" scoped>
    25. 
   
  25.  .am-flexbox {
    26. 
   
  26.  margin: 10px 0;
    27. 
   
  27.  }
    28. 
   
    29. 
   
  29.  .demo-item {
    30. 
   
  30.  padding: 6px 0;
    31. 
   
  31.  background: #4A89DC;
    32. 
   
  32.  border-radius: 4px;
    33. 
   
  33.  text-align: center;
    34. 
   
  34.  color: #fff;
    35. 
   
  35.  }
    36. 
   
    37. 
   
  37.  .am-flexbox-item {
    38. 
   
  38.  .demo-item;
    39. 
   
  39.  }
    40. 
   
    41. 
   
  41.  .placeholder {
    42. 
   
  42.  .demo-item;
    43. 
   
  43.  width: 70px;
    44. 
   
  44.  font-size: 12px;
    45. 
   
  45.  margin-left: 8px;
    46. 
   
  46.  margin-right: 8px;
    47. 
   
  47.  }
    48. 
   
    49. 
   
  49. </style>
    50.

排列方向

截图

代码

  
    
   
  1. <template>
    2. 
   
  2.  <div>
    3. 
   
  3.  <Flexbox>
    4. 
   
  4.  <div class="placeholder">1</div>
    5. 
   
  5.  <div class="placeholder">2</div>
    6. 
   
  6.  <div class="placeholder">3</div>
    7. 
   
  7.  </Flexbox>
    8. 
   
    9. 
   
  9.  <Flexbox direction="row-reverse">
    10. 
   
  10.  <div class="placeholder">1</div>
    11. 
   
  11.  <div class="placeholder">2</div>
    12. 
   
  12.  <div class="placeholder">3</div>
    13. 
   
  13.  </Flexbox>
    14. 
   
  14.  </div>
    15. 
   
  15. </template>
    16. 
   
    17. 
   
  17. <style lang="less" rel="stylesheet/less" scoped>
    18. 
   
  18.  .am-flexbox {
    19. 
   
  19.  margin: 10px 0;
    20. 
   
  20.  }
    21. 
   
    22. 
   
  22.  .demo-item {
    23. 
   
  23.  padding: 6px 0;
    24. 
   
  24.  background: #4A89DC;
    25. 
   
  25.  border-radius: 4px;
    26. 
   
  26.  text-align: center;
    27. 
   
  27.  color: #fff;
    28. 
   
  28.  }
    29. 
   
    30. 
   
  30.  .am-flexbox-item {
    31. 
   
  31.  .demo-item;
    32. 
   
  32.  }
    33. 
   
    34. 
   
  34.  .placeholder {
    35. 
   
  35.  .demo-item;
    36. 
   
  36.  width: 70px;
    37. 
   
  37.  font-size: 12px;
    38. 
   
  38.  margin-left: 8px;
    39. 
   
  39.  margin-right: 8px;
    40. 
   
  40.  }
    41. 
   
    42. 
   
  42. </style>
    43.

元素换行

截图

代码

  
    
   
  1. <template>
    2. 
   
  2.  <div>
    3. 
   
  3.  <Flexbox>
    4. 
   
  4.  <div class="placeholder">1</div>
    5. 
   
  5.  <div class="placeholder">2</div>
    6. 
   
  6.  <div class="placeholder">3</div>
    7. 
   
  7.  <div class="placeholder">4</div>
    8. 
   
  8.  <div class="placeholder">5</div>
    9. 
   
  9.  <div class="placeholder">6</div>
    10. 
   
  10.  <div class="placeholder">7</div>
    11. 
   
  11.  <div class="placeholder">8</div>
    12. 
   
  12.  <div class="placeholder">9</div>
    13. 
   
  13.  </Flexbox>
    14. 
   
    15. 
   
  15.  <Flexbox wrap="wrap">
    16. 
   
  16.  <div class="placeholder">1</div>
    17. 
   
  17.  <div class="placeholder">2</div>
    18. 
   
  18.  <div class="placeholder">3</div>
    19. 
   
  19.  <div class="placeholder">4</div>
    20. 
   
  20.  <div class="placeholder">5</div>
    21. 
   
  21.  <div class="placeholder">6</div>
    22. 
   
  22.  <div class="placeholder">7</div>
    23. 
   
  23.  <div class="placeholder">8</div>
    24. 
   
  24.  <div class="placeholder">9</div>
    25. 
   
  25.  </Flexbox>
    26. 
   
    27. 
   
  27.  <Flexbox wrap="wrap-reverse">
    28. 
   
  28.  <div class="placeholder">1</div>
    29. 
   
  29.  <div class="placeholder">2</div>
    30. 
   
  30.  <div class="placeholder">3</div>
    31. 
   
  31.  <div class="placeholder">4</div>
    32. 
   
  32.  <div class="placeholder">5</div>
    33. 
   
  33.  <div class="placeholder">6</div>
    34. 
   
  34.  <div class="placeholder">7</div>
    35. 
   
  35.  <div class="placeholder">8</div>
    36. 
   
  36.  <div class="placeholder">9</div>
    37. 
   
  37.  </Flexbox>
    38. 
   
  38.  </div>
    39. 
   
  39. </template>
    40. 
   
    41. 
   
  41. <style lang="less" rel="stylesheet/less" scoped>
    42. 
   
  42.  .am-flexbox {
    43. 
   
  43.  margin: 10px 0;
    44. 
   
  44.  }
    45. 
   
    46. 
   
  46.  .demo-item {
    47. 
   
  47.  padding: 6px 0;
    48. 
   
  48.  background: #4A89DC;
    49. 
   
  49.  border-radius: 4px;
    50. 
   
  50.  text-align: center;
    51. 
   
  51.  color: #fff;
    52. 
   
  52.  }
    53. 
   
    54. 
   
  54.  .am-flexbox-item {
    55. 
   
  55.  .demo-item;
    56. 
   
  56.  }
    57. 
   
    58. 
   
  58.  .placeholder {
    59. 
   
  59.  .demo-item;
    60. 
   
  60.  width: 70px;
    61. 
   
  61.  font-size: 12px;
    62. 
   
  62.  margin: 8px;
    63. 
   
  63.  }
    64. 
   
    65. 
   
  65. </style>
    66.

对齐方式

截图

代码

  
    
   
  1. <template>
    2. 
   
  2.  <div>
    3. 
   
  3.  <Flexbox>
    4. 
   
  4.  <div class="placeholder">1</div>
    5. 
   
  5.  <div class="placeholder">2</div>
    6. 
   
  6.  </Flexbox>
    7. 
   
    8. 
   
  8.  <Flexbox justify="center">
    9. 
   
  9.  <div class="placeholder">1</div>
    10. 
   
  10.  <div class="placeholder">2</div>
    11. 
   
  11.  </Flexbox>
    12. 
   
  12.  </div>
    13. 
   
  13. </template>
    14. 
   
    15. 
   
  15. <style lang="less" rel="stylesheet/less" scoped>
    16. 
   
  16.  .am-flexbox {
    17. 
   
  17.  margin: 10px 0;
    18. 
   
  18.  }
    19. 
   
    20. 
   
  20.  .demo-item {
    21. 
   
  21.  padding: 6px 0;
    22. 
   
  22.  background: #4A89DC;
    23. 
   
  23.  border-radius: 4px;
    24. 
   
  24.  text-align: center;
    25. 
   
  25.  color: #fff;
    26. 
   
  26.  }
    27. 
   
    28. 
   
  28.  .am-flexbox-item {
    29. 
   
  29.  .demo-item;
    30. 
   
  30.  }
    31. 
   
    32. 
   
  32.  .placeholder {
    33. 
   
  33.  .demo-item;
    34. 
   
  34.  width: 70px;
    35. 
   
  35.  font-size: 12px;
    36. 
   
  36.  margin-left: 8px;
    37. 
   
  37.  margin-right: 8px;
    38. 
   
  38.  }
    39. 
   
    40. 
   
  40. </style>
    41.

交叉轴对齐方式

截图

代码

  
    
   
  1. <template>
    2. 
   
  2.  <div>
    3. 
   
  3.  <Flexbox>
    4. 
   
  4.  <div class="placeholder">1</div>
    5. 
   
  5.  <div class="placeholder high">2</div>
    6. 
   
  6.  <div class="placeholder">3</div>
    7. 
   
  7.  </Flexbox>
    8. 
   
    9. 
   
  9.  <Flexbox align="start">
    10. 
   
  10.  <div class="placeholder">1</div>
    11. 
   
  11.  <div class="placeholder high">2</div>
    12. 
   
  12.  <div class="placeholder">3</div>
    13. 
   
  13.  </Flexbox>
    14. 
   
    15. 
   
  15.  <Flexbox align="stretch">
    16. 
   
  16.  <div class="placeholder">1</div>
    17. 
   
  17.  <div class="placeholder high">2</div>
    18. 
   
  18.  <div class="placeholder">3</div>
    19. 
   
  19.  </Flexbox>
    20. 
   
  20.  </div>
    21. 
   
  21. </template>
    22. 
   
    23. 
   
  23. <style lang="less" rel="stylesheet/less" scoped>
    24. 
   
  24.  .am-flexbox {
    25. 
   
  25.  margin: 10px 0;
    26. 
   
  26.  background-color: #dedede;
    27. 
   
  27.  }
    28. 
   
    29. 
   
  29.  .demo-item {
    30. 
   
  30.  padding: 6px 0;
    31. 
   
  31.  background: #4A89DC;
    32. 
   
  32.  border-radius: 4px;
    33. 
   
  33.  text-align: center;
    34. 
   
  34.  color: #fff;
    35. 
   
  35.  }
    36. 
   
    37. 
   
  37.  .am-flexbox-item {
    38. 
   
  38.  .demo-item;
    39. 
   
  39.  }
    40. 
   
    41. 
   
  41.  .placeholder {
    42. 
   
  42.  .demo-item;
    43. 
   
  43.  width: 70px;
    44. 
   
  44.  font-size: 12px;
    45. 
   
  45.  margin-left: 8px;
    46. 
   
  46.  margin-right: 8px;
    47. 
   
  47.  }
    48. 
   
    49. 
   
  49.  .high {
    50. 
   
  50.  height: 100px;
    51. 
   
  51.  }
    52. 
   
    53. 
   
  53. </style>
    54.

多轴对齐方式

截图

代码

  
    
   
  1. <template>
    2. 
   
  2.  <div>
    3. 
   
  3.  <Flexbox wrap="wrap">
    4. 
   
  4.  <div class="placeholder">1</div>
    5. 
   
  5.  <div class="placeholder">2</div>
    6. 
   
  6.  <div class="placeholder">3</div>
    7. 
   
  7.  <div class="placeholder">4</div>
    8. 
   
  8.  <div class="placeholder">5</div>
    9. 
   
  9.  <div class="placeholder">6</div>
    10. 
   
  10.  <div class="placeholder">7</div>
    11. 
   
  11.  <div class="placeholder">8</div>
    12. 
   
  12.  <div class="placeholder">9</div>
    13. 
   
  13.  </Flexbox>
    14. 
   
    15. 
   
  15.  <Flexbox wrap="wrap" align-content="start">
    16. 
   
  16.  <div class="placeholder">1</div>
    17. 
   
  17.  <div class="placeholder">2</div>
    18. 
   
  18.  <div class="placeholder">3</div>
    19. 
   
  19.  <div class="placeholder">4</div>
    20. 
   
  20.  <div class="placeholder">5</div>
    21. 
   
  21.  <div class="placeholder">6</div>
    22. 
   
  22.  <div class="placeholder">7</div>
    23. 
   
  23.  <div class="placeholder">8</div>
    24. 
   
  24.  <div class="placeholder">9</div>
    25. 
   
  25.  </Flexbox>
    26. 
   
  26.  </div>
    27. 
   
  27. </template>
    28. 
   
    29. 
   
  29. <style lang="less" rel="stylesheet/less" scoped>
    30. 
   
  30.  .am-flexbox {
    31. 
   
  31.  margin: 10px 0;
    32. 
   
  32.  height: 200px;
    33. 
   
  33.  background-color: #dedede;
    34. 
   
  34.  }
    35. 
   
    36. 
   
  36.  .demo-item {
    37. 
   
  37.  padding: 6px 0;
    38. 
   
  38.  background: #4A89DC;
    39. 
   
  39.  border-radius: 4px;
    40. 
   
  40.  text-align: center;
    41. 
   
  41.  color: #fff;
    42. 
   
  42.  }
    43. 
   
    44. 
   
  44.  .am-flexbox-item {
    45. 
   
  45.  .demo-item;
    46. 
   
  46.  }
    47. 
   
    48. 
   
  48.  .placeholder {
    49. 
   
  49.  .demo-item;
    50. 
   
  50.  width: 70px;
    51. 
   
  51.  font-size: 12px;
    52. 
   
  52.  margin: 8px;
    53. 
   
  53.  }
    54. 
   
    55. 
   
  55. </style>
    56.

请关注公众号获取更多资料

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注