Flex 布局

基本用法

  1. <nut-row>
  2. <nut-col :span="12">
  3. <div class="flex-content">span:12</div>
  4. </nut-col>
  5. <nut-col :span="12">
  6. <div class="flex-content flex-content-light">span:12</div>
  7. </nut-col>
  8. </nut-row>
  9. <nut-row>
  10. <nut-col :span="8">
  11. <div class="flex-content">span:8</div>
  12. </nut-col>
  13. <nut-col :span="8">
  14. <div class="flex-content flex-content-light">span:8</div>
  15. </nut-col>
  16. <nut-col :span="8">
  17. <div class="flex-content">span:8</div>
  18. </nut-col>
  19. </nut-row>
  20. <nut-row>
  21. <nut-col :span="6">
  22. <div class="flex-content">span:6</div>
  23. </nut-col>
  24. <nut-col :span="6">
  25. <div class="flex-content flex-content-light">span:6</div>
  26. </nut-col>
  27. <nut-col :span="6">
  28. <div class="flex-content">span:6</div>
  29. </nut-col>
  30. <nut-col :span="6">
  31. <div class="flex-content flex-content-light">span:6</div>
  32. </nut-col>
  33. </nut-row>
  34. <nut-row>
  35. <nut-col :span="4">
  36. <div class="flex-content">span:4</div>
  37. </nut-col>
  38. <nut-col :span="4">
  39. <div class="flex-content flex-content-light">span:4</div>
  40. </nut-col>
  41. <nut-col :span="4">
  42. <div class="flex-content">span:4</div>
  43. </nut-col>
  44. <nut-col :span="4">
  45. <div class="flex-content flex-content-light">span:4</div>
  46. </nut-col>
  47. <nut-col :span="4">
  48. <div class="flex-content">span:4</div>
  49. </nut-col>
  50. <nut-col :span="4">
  51. <div class="flex-content flex-content-light">span:4</div>
  52. </nut-col>
  53. </nut-row>

设置元素间距

  1. <nut-row :gutter="10">
  2. <nut-col :span="6">
  3. <div class="flex-content">span:6</div>
  4. </nut-col>
  5. <nut-col :span="6">
  6. <div class="flex-content flex-content-light">span:6</div>
  7. </nut-col>
  8. <nut-col :span="6">
  9. <div class="flex-content">span:6</div>
  10. </nut-col>
  11. <nut-col :span="6">
  12. <div class="flex-content flex-content-light">span:6</div>
  13. </nut-col>
  14. </nut-row>

Flex布局

wrap(是否换行)

  1. <nut-row type="flex" flexWrap="nowrap" :gutter="10">
  2. <nut-col :span="6">
  3. <div class="flex-content">1</div>
  4. </nut-col>
  5. <nut-col :span="6">
  6. <div class="flex-content flex-content-light">2</div>
  7. </nut-col>
  8. <nut-col :span="6">
  9. <div class="flex-content">3</div>
  10. </nut-col>
  11. <nut-col :span="6">
  12. <div class="flex-content flex-content-light">4</div>
  13. </nut-col>
  14. <nut-col :span="6">
  15. <div class="flex-content">5</div>
  16. </nut-col>
  17. <nut-col :span="6">
  18. <div class="flex-content flex-content-light">6</div>
  19. </nut-col>
  20. <nut-col :span="6">
  21. <div class="flex-content">7</div>
  22. </nut-col>
  23. </nut-row>
  24. <nut-row type="flex" flexWrap="wrap" :gutter="10">
  25. <nut-col :span="6">
  26. <div class="flex-content">1</div>
  27. </nut-col>
  28. <nut-col :span="6">
  29. <div class="flex-content flex-content-light">2</div>
  30. </nut-col>
  31. <nut-col :span="6">
  32. <div class="flex-content">3</div>
  33. </nut-col>
  34. <nut-col :span="6">
  35. <div class="flex-content flex-content-light">4</div>
  36. </nut-col>
  37. <nut-col :span="6">
  38. <div class="flex-content">5</div>
  39. </nut-col>
  40. <nut-col :span="6">
  41. <div class="flex-content flex-content-light">6</div>
  42. </nut-col>
  43. <nut-col :span="6">
  44. <div class="flex-content">7</div>
  45. </nut-col>
  46. </nut-row>
  47. <nut-row type="flex" flexWrap="reverse" :gutter="10">
  48. <nut-col :span="6">
  49. <div class="flex-content">1</div>
  50. </nut-col>
  51. <nut-col :span="6">
  52. <div class="flex-content flex-content-light">2</div>
  53. </nut-col>
  54. <nut-col :span="6">
  55. <div class="flex-content">3</div>
  56. </nut-col>
  57. <nut-col :span="6">
  58. <div class="flex-content flex-content-light">4</div>
  59. </nut-col>
  60. <nut-col :span="6">
  61. <div class="flex-content">5</div>
  62. </nut-col>
  63. <nut-col :span="6">
  64. <div class="flex-content flex-content-light">6</div>
  65. </nut-col>
  66. <nut-col :span="6">
  67. <div class="flex-content">7</div>
  68. </nut-col>
  69. </nut-row>

justify(主轴方向)

  1. <nut-row type="flex">
  2. <nut-col :span="6">
  3. <div class="flex-content">start</div>
  4. </nut-col>
  5. <nut-col :span="6">
  6. <div class="flex-content flex-content-light">start</div>
  7. </nut-col>
  8. <nut-col :span="6">
  9. <div class="flex-content">start</div>
  10. </nut-col>
  11. </nut-row>
  12. <nut-row type="flex" justify="center">
  13. <nut-col :span="6">
  14. <div class="flex-content">center</div>
  15. </nut-col>
  16. <nut-col :span="6">
  17. <div class="flex-content flex-content-light">center</div>
  18. </nut-col>
  19. <nut-col :span="6">
  20. <div class="flex-content">center</div>
  21. </nut-col>
  22. </nut-row>
  23. <nut-row type="flex" justify="end">
  24. <nut-col :span="6">
  25. <div class="flex-content">end</div>
  26. </nut-col>
  27. <nut-col :span="6">
  28. <div class="flex-content flex-content-light">end</div>
  29. </nut-col>
  30. <nut-col :span="6">
  31. <div class="flex-content">end</div>
  32. </nut-col>
  33. </nut-row>
  34. <nut-row type="flex" justify="space-between">
  35. <nut-col :span="6">
  36. <div class="flex-content">between</div>
  37. </nut-col>
  38. <nut-col :span="6">
  39. <div class="flex-content flex-content-light">between</div>
  40. </nut-col>
  41. <nut-col :span="6">
  42. <div class="flex-content">between</div>
  43. </nut-col>
  44. </nut-row>
  45. <nut-row type="flex" justify="space-around">
  46. <nut-col :span="6">
  47. <div class="flex-content">around</div>
  48. </nut-col>
  49. <nut-col :span="6">
  50. <div class="flex-content flex-content-light">around</div>
  51. </nut-col>
  52. <nut-col :span="6">
  53. <div class="flex-content">around</div>
  54. </nut-col>
  55. </nut-row>

align(侧轴方向)

  1. <nut-row type="flex" gutter="10" align="flex-start">
  2. <nut-col :span="6">
  3. <div class="flex-content flex-content-height">1</div>
  4. </nut-col>
  5. <nut-col :span="12">
  6. <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
  7. </nut-col>
  8. <nut-col :span="6">
  9. <div class="flex-content flex-content-height">3</div>
  10. </nut-col>
  11. </nut-row>
  12. <nut-row type="flex" gutter="10" align="center">
  13. <nut-col :span="6">
  14. <div class="flex-content flex-content-height">1</div>
  15. </nut-col>
  16. <nut-col :span="12">
  17. <div class="flex-content flex-content-light">居中对齐 - center</div>
  18. </nut-col>
  19. <nut-col :span="6">
  20. <div class="flex-content flex-content-height">3</div>
  21. </nut-col>
  22. </nut-row>
  23. <nut-row type="flex" gutter="10" align="flex-end">
  24. <nut-col :span="6">
  25. <div class="flex-content flex-content-height">1</div>
  26. </nut-col>
  27. <nut-col :span="12">
  28. <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
  29. </nut-col>
  30. <nut-col :span="6">
  31. <div class="flex-content flex-content-height">3</div>
  32. </nut-col>
  33. </nut-row>

分栏偏移

  1. <nut-row type="flex">
  2. <nut-col :offset="6" span="6">
  3. <div class="flex-content">offset:6</div>
  4. </nut-col>
  5. <nut-col :span="6">
  6. <div class="flex-content flex-content-light">span:6</div>
  7. </nut-col>
  8. <nut-col :span="6">
  9. <div class="flex-content">span:6</div>
  10. </nut-col>
  11. </nut-row>
  12. <nut-row type="flex">
  13. <nut-col span="6">
  14. <div class="flex-content">span:6</div>
  15. </nut-col>
  16. <nut-col :offset="8" :span="6">
  17. <div class="flex-content flex-content-light">offset:8</div>
  18. </nut-col>
  19. <nut-col :span="6">
  20. <div class="flex-content">span:6</div>
  21. </nut-col>
  22. </nut-row>
  23. <nut-row type="flex">
  24. <nut-col span="6" :offset="6">
  25. <div class="flex-content">offset:6</div>
  26. </nut-col>
  27. <nut-col :span="6" :offset="6">
  28. <div class="flex-content">offset:6</div>
  29. </nut-col>
  30. </nut-row>

Prop

row

字段说明类型默认值
type布局方式,可选值为flexString-
gutter列元素之间的间距(单位为px)String/Number-
tag自定义元素标签Stringdiv
justifyFlex 主轴对齐方式,可选值为 start end center space-around space-betweenStringstart
alignFlex 交叉轴对齐方式,可选值为 flex-start center flex-endStringflex-start
flex-wrapFlex是否换行,可选值为 nowrap wrap reverseStringnowrap

col

字段说明类型默认值
span列元素宽度(共分为24份,例如设置一行3个,那么span值为8)String/Number-
offset列元素偏移距离String/Number-

Flex Flex布局 - 图1