All Products
Search
Document Center

Flexbox

Last Updated: May 27, 2021

This topic describes different methods of using the Flexbox component and the API descriptions:

  • Use this component in the Kylin project.
  • Use this component in other projects. Import it through ESModule.
  • API description provides API information for props and slots.

To view the visual effects and code sample of the component, see Demo.

Kylin

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

ESModule

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

API description

Flexbox

props

Property Description Type Default value
direction The children’s arrangement method. Valid values: row, row-reverse, column, and `column-reverse. String 'row'
wrap The children’s line-wrap method. Valid values: nowrap, wrap, and wrap-reverse. String 'nowrap'
justify The children’s alignment on the main axis. Valid values: start, end, center, between, and around. String 'start'
align The children’s alignment on cross axes. Valid values: start, center, end, baseline, and stretch. String 'center'
alignContent The alignment on multiple axes. Valid values: start, end, center, between, around, and stretch. String 'stretch'

slots

Name Description Scope
- Default slot used to populate the content of the layout. -

FlexboxItem

props

FlexboxItem additionally provides the flex: 1 style by default, ensuring the same width for all items. A child of Flexbox may not necessarily be a FlexboxItem.

slots

Name Description Scope
- Default slot used to populate the content of the element. -

Demo

Basic style

Sample image

Sample code

 
  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>

Arrangement direction

Sample image

Sample code

 
  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>

Element wrap

Sample image

Sample code

 
  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>

Alignment

Sample image

Sample code

 
  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>

Cross-axis alignment

Sample image

Sample code

 
  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>

Multi-axis alignment

Sample image

Sample code

 
  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>