Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: a2af185cf8
Branches Tags
nutui
/
src
/
packages
/
flex
/
doc.md

doc.md 5.6 KB
History Raw

Flex 布局

基本用法

<nut-row>
    <nut-col :span="12">
        <div class="flex-content">span:12</div>
    </nut-col>
    <nut-col :span="12">
        <div class="flex-content flex-content-light">span:12</div>
    </nut-col>
</nut-row>
<nut-row>
    <nut-col :span="8">
        <div class="flex-content">span:8</div>
    </nut-col>
    <nut-col :span="8">
        <div class="flex-content flex-content-light">span:8</div>
    </nut-col>
    <nut-col :span="8">
        <div class="flex-content">span:8</div>
    </nut-col>
</nut-row>
<nut-row>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
        </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
</nut-row>
<nut-row>
    <nut-col :span="4">
        <div class="flex-content">span:4</div>
    </nut-col>
    <nut-col :span="4">
        <div class="flex-content flex-content-light">span:4</div>
    </nut-col>
    <nut-col :span="4">
        <div class="flex-content">span:4</div>
    </nut-col>
    <nut-col :span="4">
        <div class="flex-content flex-content-light">span:4</div>
    </nut-col>
    <nut-col :span="4">
        <div class="flex-content">span:4</div>
    </nut-col>
    <nut-col :span="4">
        <div class="flex-content flex-content-light">span:4</div>
    </nut-col>
</nut-row>

设置元素间距

<nut-row :gutter="10">
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
</nut-row>

Flex布局

wrap（是否换行）

<nut-row type="flex" flexWrap="nowrap" :gutter="10">
    <nut-col :span="6">
        <div class="flex-content">1</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">2</div>
    </nut-col>
</nut-row>
<nut-row type="flex" flexWrap="wrap" :gutter="10">
    <nut-col :span="6">
        <div class="flex-content">1</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">2</div>
    </nut-col>
</nut-row>
<nut-row type="flex" flexWrap="reverse" :gutter="10">
    <nut-col :span="6">
        <div class="flex-content">1</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">2</div>
    </nut-col>
</nut-row>

justify（主轴方向）

<nut-row type="flex">
    <nut-col :span="6">
        <div class="flex-content">start</div>
    </nut-col>
</nut-row>
<nut-row type="flex" justify="center">
    <nut-col :span="6">
        <div class="flex-content">center</div>
    </nut-col>
</nut-row>
<nut-row type="flex" justify="end">
    <nut-col :span="6">
        <div class="flex-content">end</div>
    </nut-col>
</nut-row>
<nut-row type="flex" justify="space-between">
    <nut-col :span="6">
        <div class="flex-content">between</div>
    </nut-col>
</nut-row>
<nut-row type="flex" justify="space-around">
    <nut-col :span="6">
        <div class="flex-content">around</div>
    </nut-col>
</nut-row>

align（侧轴方向）

<nut-row type="flex" gutter="10" align="flex-start">
    <nut-col :span="12">
        <div class="flex-content flex-content-light">顶部对齐 - flex-start</div>
    </nut-col>
</nut-row>
<nut-row type="flex" gutter="10" align="center">
    <nut-col :span="12">
        <div class="flex-content flex-content-light">居中对齐 - center</div>
    </nut-col>
</nut-row>
<nut-row type="flex" gutter="10" align="flex-end">
    <nut-col :span="12">
        <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
    </nut-col>
</nut-row>

分栏偏移

<nut-row type="flex">
    <nut-col :offset="6" span="6">
        <div class="flex-content">offset:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content flex-content-light">span:6</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
</nut-row>
<nut-row type="flex">
    <nut-col span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
    <nut-col :offset="8" :span="6">
        <div class="flex-content flex-content-light">offset:8</div>
    </nut-col>
    <nut-col :span="6">
        <div class="flex-content">span:6</div>
    </nut-col>
</nut-row>
<nut-row type="flex">
    <nut-col span="6" :offset="6">
        <div class="flex-content">offset:6</div>
    </nut-col>
    <nut-col :span="6" :offset="6">
        <div class="flex-content">offset:6</div>
    </nut-col>
</nut-row>

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
flexWrap Flex是否换行，可选值为 nowrap wrap reverse String nowrap

col

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