import{c as t,o as n,D as l}from"./index.d870aa4d.js";const o={class:"markdown-body"},u=l('Layout 布局
介绍
用于快速进行布局
安装
import { createApp } from 'vue';\nimport { Layout } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Layout);\n
代码演示
基础用法
<nut-row>\n <nut-col :span="24">\n <div class="flex-content">span:24</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="12">\n <div class="flex-content">span:12</div>\n </nut-col>\n <nut-col :span="12">\n <div class="flex-content flex-content-light">span:12</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content flex-content-light">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n
设置元素间距
<nut-row :gutter="10">\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content flex-content-light">span:8</div>\n </nut-col>\n <nut-col :span="8">\n <div class="flex-content">span:8</div>\n </nut-col>\n</nut-row> \n
Flex布局
<nut-row type="flex" wrap="nowrap">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="center">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="end">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="space-between">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="space-around">\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">span:6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n</nut-row>\n
Prop
row
| 字段 | 说明 | 类型 | 默认值 |
|---|
| type | 布局方式，可选值为flex | String | - |
| gutter | 列元素之间的间距（单位为px） | String、Number | - |
| justify | Flex 主轴对齐方式，可选值为 start end center space-around space-between | String | start |
| align | Flex 交叉轴对齐方式，可选值为 flex-start center flex-end | String | flex-start |
| flex-wrap | Flex是否换行，可选值为 nowrap wrap reverse | String | nowrap |
col
| 字段 | 说明 | 类型 | 默认值 |
|---|
| span | 列元素宽度（共分为24份，例如设置一行3个，那么span值为8） | String、Number | 24 |
| offset | 列元素偏移距离 | String、Number | 0 |
',17),e={expose:[],setup:l=>(l,e)=>(n(),t("div",o,[u]))};export default e;