全部产品
云市场

Flexbox 弹性盒子

更新时间:2020-04-28 16:56:23

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

  • Kylin 工程中使用该组件。
  • 在别的工程中使用,通过 ESModule 的方式来导入组件。

API 文档 提供了 props、slots 的接口信息。

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

Kylin

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

ESModule

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

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.基础样式

截图

代码

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

2.排列方向

截图

代码

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

3.元素换行

截图

代码

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

4.对齐方式

截图

代码

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

5.交叉轴对齐方式

截图

代码

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

6.多轴对齐方式

截图

代码

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