Flex 布局请使用手机扫码体验

基本用法

  1. html
    <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. html
    <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. html
    <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. html
    <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. html
    <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. html
    <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