import{c as t,o as n,A as l}from"./vendor.91b30fe3.js";const o={class:"markdown-body"},u=l('Layout 布局
介绍
用于快速进行布局
安装
import { createApp } from 'vue';\nimport { Row, Col } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Row);\napp.use(Col);\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 flex-content-light">span:6</div>\n </nut-col>\n</nut-row>\n<nut-row>\n <nut-col :span="4">\n <div class="flex-content">span:4</div>\n </nut-col>\n <nut-col :span="4">\n <div class="flex-content flex-content-light">span:4</div>\n </nut-col>\n <nut-col :span="4">\n <div class="flex-content">span:4</div>\n </nut-col>\n <nut-col :span="4">\n <div class="flex-content flex-content-light">span:4</div>\n </nut-col>\n <nut-col :span="4">\n <div class="flex-content">span:4</div>\n </nut-col>\n <nut-col :span="4">\n <div class="flex-content flex-content-light">span:4</div>\n </nut-col>\n</nut-row>\n\n
设置元素间距
<nut-row :gutter="10">\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 flex-content-light">span:6</div>\n </nut-col>\n</nut-row>\n \n
Flex布局
wrap（是否换行）
<nut-row type="flex" flexWrap="nowrap" :gutter="10">\n <nut-col :span="6">\n <div class="flex-content">1</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">2</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">3</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">4</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">5</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">7</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" flexWrap="wrap" :gutter="10">\n <nut-col :span="6">\n <div class="flex-content">1</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">2</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">3</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">4</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">5</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">7</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" flexWrap="reverse" :gutter="10">\n <nut-col :span="6">\n <div class="flex-content">1</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">2</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">3</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">4</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">5</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">6</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">7</div>\n </nut-col>\n</nut-row>\n\n
justify（主轴方向）
<nut-row type="flex">\n <nut-col :span="6">\n <div class="flex-content">start</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">start</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">start</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="center">\n <nut-col :span="6">\n <div class="flex-content">center</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">center</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">center</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" justify="end">\n <nut-col :span="6">\n <div class="flex-content">end</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">end</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">end</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">between</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">between</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">between</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">around</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-light">around</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content">around</div>\n </nut-col>\n</nut-row>\n\n
align（侧轴方向）
<nut-row type="flex" gutter="10" align="flex-start">\n <nut-col :span="6">\n <div class="flex-content flex-content-height">1</div>\n </nut-col>\n <nut-col :span="12">\n <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-height">3</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" gutter="10" align="center">\n <nut-col :span="6">\n <div class="flex-content flex-content-height">1</div>\n </nut-col>\n <nut-col :span="12">\n <div class="flex-content flex-content-light">居中对齐 - center</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-height">3</div>\n </nut-col>\n</nut-row>\n<nut-row type="flex" gutter="10" align="flex-end">\n <nut-col :span="6">\n <div class="flex-content flex-content-height">1</div>\n </nut-col>\n <nut-col :span="12">\n <div class="flex-content flex-content-light">底部对齐 - flex-end</div>\n </nut-col>\n <nut-col :span="6">\n <div class="flex-content flex-content-height">3</div>\n </nut-col>\n</nut-row>\n\n
分栏偏移
<nut-row type="flex">\n <nut-col :offset="6" span="6">\n <div class="flex-content">offset: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">\n <nut-col span="6">\n <div class="flex-content">span:6</div>\n </nut-col>\n <nut-col :offset="8" :span="6">\n <div class="flex-content flex-content-light">offset:8</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">\n <nut-col span="6" :offset="6">\n <div class="flex-content">offset:6</div>\n </nut-col>\n <nut-col :span="6" :offset="6">\n <div class="flex-content">offset:6</div>\n </nut-col>\n</nut-row>\n\n
Prop
row
| 字段 | 说明 | 类型 | 默认值 |
|---|
| type | 布局方式，可选值为flex | String | - |
| gutter | 列元素之间的间距（单位为px） | String/Number | - |
| tag | 自定义元素标签 | String | div |
| 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 | - |
| offset | 列元素偏移距离 | String/Number | - |
',24),g={expose:[],setup:l=>(l,g)=>(n(),t("div",o,[u]))};export default g;