Layout 布局

介绍

用于快速进行布局

安装

  1. import { createApp } from 'vue';
  2. import { Layout } from '@nutui/nutui';
  4. const app = createApp();
  5. app.use(Layout);

代码演示

基础用法

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

设置元素间距

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

Flex布局

  1. <nut-row type="flex" wrap="nowrap">
  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-row>
  12. <nut-row type="flex" justify="center">
  13.   <nut-col :span="6">
  14.     <div class="flex-content">span:6</div>
  15.   </nut-col>
  16.   <nut-col :span="6">
  17.     <div class="flex-content flex-content-light">span:6</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" justify="end">
  24.   <nut-col :span="6">
  25.     <div class="flex-content">span:6</div>
  26.   </nut-col>
  27.   <nut-col :span="6">
  28.     <div class="flex-content flex-content-light">span:6</div>
  29.   </nut-col>
  30.   <nut-col :span="6">
  31.     <div class="flex-content">span:6</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">span:6</div>
  37.   </nut-col>
  38.   <nut-col :span="6">
  39.     <div class="flex-content flex-content-light">span:6</div>
  40.   </nut-col>
  41.   <nut-col :span="6">
  42.     <div class="flex-content">span:6</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">span:6</div>
  48.   </nut-col>
  49.   <nut-col :span="6">
  50.     <div class="flex-content flex-content-light">span:6</div>
  51.   </nut-col>
  52.   <nut-col :span="6">
  53.     <div class="flex-content">span:6</div>
  54.   </nut-col>
  55. </nut-row>

Prop

row

字段说明类型默认值
type布局方式，可选值为flexString-
gutter列元素之间的间距（单位为px）String、Number-
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、Number24
offset列元素偏移距离String、Number0

Layout 布局 - 图1