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-row>
  9. <nut-row type="flex" flexWrap="wrap" :gutter="10">
  10.     <nut-col :span="6">
  11.         <div class="flex-content">1</div>
  12.     </nut-col>
  13.     <nut-col :span="6">
  14.         <div class="flex-content flex-content-light">2</div>
  15.     </nut-col>
  16. </nut-row>
  17. <nut-row type="flex" flexWrap="reverse" :gutter="10">
  18.     <nut-col :span="6">
  19.         <div class="flex-content">1</div>
  20.     </nut-col>
  21.     <nut-col :span="6">
  22.         <div class="flex-content flex-content-light">2</div>
  23.     </nut-col>
  24. </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-row>
  6. <nut-row type="flex" justify="center">
  7.     <nut-col :span="6">
  8.         <div class="flex-content">center</div>
  9.     </nut-col>
  10. </nut-row>
  11. <nut-row type="flex" justify="end">
  12.     <nut-col :span="6">
  13.         <div class="flex-content">end</div>
  14.     </nut-col>
  15. </nut-row>
  16. <nut-row type="flex" justify="space-between">
  17.     <nut-col :span="6">
  18.         <div class="flex-content">between</div>
  19.     </nut-col>
  20. </nut-row>
  21. <nut-row type="flex" justify="space-around">
  22.     <nut-col :span="6">
  23.         <div class="flex-content">around</div>
  24.     </nut-col>
  25. </nut-row>

align（侧轴方向）

  1. html
    <nut-row type="flex" gutter="10" align="flex-start">
  2.     <nut-col :span="12">
  3.         <div class="flex-content flex-content-light">顶部对齐 -- flex-start</div>
  4.     </nut-col>
  5. </nut-row>
  6. <nut-row type="flex" gutter="10" align="center">
  7.     <nut-col :span="12">
  8.         <div class="flex-content flex-content-light">居中对齐 -- center</div>
  9.     </nut-col>
  10. </nut-row>
  11. <nut-row type="flex" gutter="10" align="flex-end">
  12.     <nut-col :span="12">
  13.         <div class="flex-content flex-content-light">底部对齐 -- flex-end</div>
  14.     </nut-col>
  15. </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
flexWrapFlex是否换行，可选值为 nowrap wrap reverseStringnowrap

col

字段说明类型默认值
span列元素宽度String/Number-
offset列元素偏移距离String/Number-