Row component forces the use of flex layout, and add prop wrap. Col add flex prop
This commit is contained in:
梁灏
parent
27adf364c0
commit
8d9ba2b089
5 changed files with 274 additions and 219 deletions
|
|
@ -1,152 +1,191 @@
|
||||||
<style>
|
<style>
|
||||||
.view {
|
.demo-row{
|
||||||
height: 100px;
|
margin-bottom: 5px;
|
||||||
width: 100px;
|
background-image: -webkit-linear-gradient(0deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
|
||||||
background: yellow;
|
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
|
||||||
|
}
|
||||||
|
.demo-col{
|
||||||
|
color: #fff;
|
||||||
|
padding: 30px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
background: rgba(0, 153, 229, .7);
|
||||||
|
}
|
||||||
|
.demo-col.light{
|
||||||
|
background: rgba(0, 153, 229, .5);
|
||||||
|
}
|
||||||
|
.demo-row.light .demo-col{
|
||||||
|
background: rgba(0, 153, 229, .5);
|
||||||
|
}
|
||||||
|
.demo-row.light .demo-col.light{
|
||||||
|
background: rgba(0, 153, 229, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-demo .ivu-col, .example-demo .ivu-col div{
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(0, 153, 229, .9);
|
||||||
|
}
|
||||||
|
.example-demo .gutter .ivu-col{
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.example-demo .ivu-col:nth-child(odd), .example-demo .ivu-col:nth-child(odd) div{
|
||||||
|
background: rgba(0, 153, 229, .7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-row-bg{
|
||||||
|
background: rgba(0,0,0,.05);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="example-demo">
|
||||||
<Row type='flex' justify='center'>
|
<Row>
|
||||||
<i-col span='21' class="offset-header">
|
<Col span="12">col-12</Col>
|
||||||
<Row type='flex' :gutter='16' justify='space-between'>
|
<Col span="12">col-12</Col>
|
||||||
<i-col :order='25'>
|
|
||||||
<div class="view">
|
|
||||||
<label>245</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='1'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>1</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='2'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='3'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>3</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='4'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>4</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='5'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>5</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='6'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>6</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='7'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='8'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='9'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='10'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='11'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='12'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='13'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>12</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='14'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='15'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='16'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='17'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='18'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='19'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='20'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='21'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='22'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='23'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='24'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>2</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='25'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>25-------</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
<i-col :xs='12' :sm='12' :md='8' :lg='8' :order='26'>
|
|
||||||
<div class="view" >
|
|
||||||
<label>26------</label>
|
|
||||||
</div>
|
|
||||||
</i-col>
|
|
||||||
</Row>
|
</Row>
|
||||||
</i-col>
|
<br>
|
||||||
|
<Row>
|
||||||
|
<Col span="8">col-8</Col>
|
||||||
|
<Col span="8">col-8</Col>
|
||||||
|
<Col span="8">col-8</Col>
|
||||||
|
</Row>
|
||||||
|
<br>
|
||||||
|
<Row>
|
||||||
|
<Col span="6">col-6</Col>
|
||||||
|
<Col span="6">col-6</Col>
|
||||||
|
<Col span="6">col-6</Col>
|
||||||
|
<Col span="6">col-6</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<Row :gutter="16">
|
||||||
|
<Col span="6">
|
||||||
|
<div>col-6</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="6">
|
||||||
|
<div>col-6</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="6">
|
||||||
|
<div>col-6</div>
|
||||||
|
</Col>
|
||||||
|
<Col span="6">
|
||||||
|
<div>col-6</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<Row type="flex">
|
||||||
|
<Col span="6" order="4">1 | order-4</Col>
|
||||||
|
<Col span="6" order="3">2 | order-3</Col>
|
||||||
|
<Col span="6" order="2">3 | order-2</Col>
|
||||||
|
<Col span="6" order="1">4 | order-1</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<Row>
|
||||||
|
<Col span="18" push="6">col-18 | push-6</Col>
|
||||||
|
<Col span="6" pull="18">col-6 | pull-18</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<Row>
|
||||||
|
<Col span="8">col-8</Col>
|
||||||
|
<Col span="8" offset="8">col-8 | offset-8</Col>
|
||||||
|
</Row>
|
||||||
|
<br>
|
||||||
|
<Row>
|
||||||
|
<Col span="6" offset="8">col-6 | offset-8</Col>
|
||||||
|
<Col span="6" offset="4">col-6 | offset-4</Col>
|
||||||
|
</Row>
|
||||||
|
<br>
|
||||||
|
<Row>
|
||||||
|
<Col span="12" offset="8">col-12 | offset-8</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<p>子元素向左排列</p>
|
||||||
|
<Row type="flex" justify="start" class="code-row-bg">
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
</Row>
|
||||||
|
<p>子元素向右排列</p>
|
||||||
|
<Row type="flex" justify="end" class="code-row-bg">
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
</Row>
|
||||||
|
<p>子元素居中排列</p>
|
||||||
|
<Row type="flex" justify="center" class="code-row-bg">
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
</Row>
|
||||||
|
<p>子元素等宽排列</p>
|
||||||
|
<Row type="flex" justify="space-between" class="code-row-bg">
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
</Row>
|
||||||
|
<p>子元素分散排列</p>
|
||||||
|
<Row type="flex" justify="space-around" class="code-row-bg">
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
<Col span="4">col-4</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<p>顶部对齐</p>
|
||||||
|
<Row type="flex" justify="center" align="top" class="code-row-bg">
|
||||||
|
<Col span="4"><p style="height: 80px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 30px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 100px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 60px">col-4</p></Col>
|
||||||
|
</Row>
|
||||||
|
<p>底部对齐</p>
|
||||||
|
<Row type="flex" justify="center" align="bottom" class="code-row-bg">
|
||||||
|
<Col span="4"><p style="height: 80px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 30px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 100px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 60px">col-4</p></Col>
|
||||||
|
</Row>
|
||||||
|
<p>居中对齐</p>
|
||||||
|
<Row type="flex" justify="center" align="middle" class="code-row-bg">
|
||||||
|
<Col span="4"><p style="height: 80px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 30px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 100px">col-4</p></Col>
|
||||||
|
<Col span="4"><p style="height: 60px">col-4</p></Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<Row>
|
||||||
|
<Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
|
||||||
|
<Col :xs="20" :sm="16" :md="12" :lg="8">Col</Col>
|
||||||
|
<Col :xs="2" :sm="4" :md="6" :lg="8">Col</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider></Divider>
|
||||||
|
<Row>
|
||||||
|
<Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
|
||||||
|
<Col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
|
||||||
|
<Col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</Col>
|
||||||
|
</Row>
|
||||||
|
<Divider>Flex 填充</Divider>
|
||||||
|
<Row>
|
||||||
|
<Col :flex="2">2 / 5</Col>
|
||||||
|
<Col :flex="3">3 / 5</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col flex="100px">100px</Col>
|
||||||
|
<Col flex="auto">Fill Rest</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col flex="1 1 200px">1 1 200px</Col>
|
||||||
|
<Col flex="0 1 300px">0 1 300px</Col>
|
||||||
|
</Row>
|
||||||
|
<Row :wrap="false">
|
||||||
|
<Col flex="none">
|
||||||
|
<div style="padding: 0 16px">none</div>
|
||||||
|
</Col>
|
||||||
|
<Col flex="auto">auto with no-wrap</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,18 @@
|
||||||
import { findComponentUpward } from '../../utils/assist';
|
import { findComponentUpward } from '../../utils/assist';
|
||||||
const prefixCls = 'ivu-col';
|
const prefixCls = 'ivu-col';
|
||||||
|
|
||||||
|
function parseFlex(flex) {
|
||||||
|
if (typeof flex === 'number') {
|
||||||
|
return `${flex} ${flex} auto`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
|
||||||
|
return `0 0 ${flex}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return flex;
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'iCol',
|
name: 'iCol',
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -21,7 +33,12 @@
|
||||||
md: [Number, Object],
|
md: [Number, Object],
|
||||||
lg: [Number, Object],
|
lg: [Number, Object],
|
||||||
xl: [Number, Object],
|
xl: [Number, Object],
|
||||||
xxl: [Number, Object]
|
xxl: [Number, Object],
|
||||||
|
// 4.5.0
|
||||||
|
flex: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -68,6 +85,11 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 4.5.0
|
||||||
|
if (this.flex) {
|
||||||
|
style.flex = parseFlex(this.flex);
|
||||||
|
}
|
||||||
|
|
||||||
return style;
|
return style;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
export default {
|
export default {
|
||||||
name: 'Row',
|
name: 'Row',
|
||||||
props: {
|
props: {
|
||||||
|
// todo 4.5.0 已无效，强制 flex
|
||||||
type: {
|
type: {
|
||||||
validator (value) {
|
validator (value) {
|
||||||
return oneOf(value, ['flex']);
|
return oneOf(value, ['flex']);
|
||||||
|
|
@ -30,17 +31,26 @@
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
className: String
|
className: String,
|
||||||
|
// 4.5.0
|
||||||
|
wrap: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classes () {
|
classes () {
|
||||||
return [
|
return [
|
||||||
|
// todo 4.5.0 已无效，强制 flex
|
||||||
|
`${prefixCls}`,
|
||||||
{
|
{
|
||||||
[`${prefixCls}`]: !this.type,
|
|
||||||
[`${prefixCls}-${this.type}`]: !!this.type,
|
[`${prefixCls}-${this.type}`]: !!this.type,
|
||||||
[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
|
[`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
|
||||||
[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
|
[`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
|
||||||
[`${this.className}`]: !!this.className
|
[`${prefixCls}-${this.align}`]: !!this.align,
|
||||||
|
[`${prefixCls}-${this.justify}`]: !!this.justify,
|
||||||
|
[`${this.className}`]: !!this.className,
|
||||||
|
[`${prefixCls}-no-wrap`]: !this.wrap
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,26 @@
|
||||||
.@{row-prefix-cls} {
|
.@{row-prefix-cls} {
|
||||||
.make-row();
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&-flex {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-flow: row wrap;
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// No wrap of flex
|
||||||
|
&-no-wrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
// x轴原点
|
// x轴原点
|
||||||
&-start {
|
&-start{
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
// x轴居中
|
// x轴居中
|
||||||
&-center {
|
&-center{
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
// x轴反方向
|
//x轴反方向
|
||||||
&-end {
|
&-end {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
@ -43,12 +44,13 @@
|
||||||
&-bottom {
|
&-bottom {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{col-prefix-cls} {
|
.@{col-prefix-cls} {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
max-width: 100%;
|
||||||
|
// Prevent columns from collapsing when empty
|
||||||
|
min-height: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.make-grid();
|
.make-grid();
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,13 @@
|
||||||
@row-prefix-cls: ~"@{css-prefix}row";
|
@row-prefix-cls: ~"@{css-prefix}row";
|
||||||
@col-prefix-cls: ~"@{css-prefix}col";
|
@col-prefix-cls: ~"@{css-prefix}col";
|
||||||
|
|
||||||
.make-row(@gutter: @grid-gutter-width) {
|
// mixins for grid system
|
||||||
position: relative;
|
|
||||||
margin-left: (@gutter / -2);
|
|
||||||
margin-right: (@gutter / -2);
|
|
||||||
height: auto;
|
|
||||||
.clearfix;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-grid-columns(@class) {
|
|
||||||
.col(@index) { // initial
|
|
||||||
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
|
||||||
.col((@index + 1), @item);
|
|
||||||
}
|
|
||||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
|
||||||
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
|
||||||
.col((@index + 1), ~"@{list}, @{item}");
|
|
||||||
}
|
|
||||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
|
||||||
@{list} {
|
|
||||||
float: left;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.col(1); // kickstart it
|
|
||||||
}
|
|
||||||
|
|
||||||
.loop-grid-columns(@index, @class) when (@index > 0) {
|
.loop-grid-columns(@index, @class) when (@index > 0) {
|
||||||
.@{col-prefix-cls}-span@{class}-@{index} {
|
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||||
display: block;
|
display: block;
|
||||||
width: percentage((@index / @grid-columns));
|
flex: 0 0 percentage((@index / @grid-columns));
|
||||||
|
max-width: percentage((@index / @grid-columns));
|
||||||
}
|
}
|
||||||
.@{col-prefix-cls}@{class}-push-@{index} {
|
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||||
left: percentage((@index / @grid-columns));
|
left: percentage((@index / @grid-columns));
|
||||||
|
|
@ -51,6 +28,12 @@
|
||||||
.@{col-prefix-cls}-span@{class}-@{index} {
|
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.@{col-prefix-cls}-push-@{index} {
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
.@{col-prefix-cls}-pull-@{index} {
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
.@{col-prefix-cls}@{class}-push-@{index} {
|
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -66,6 +49,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.make-grid(@class: ~'') {
|
.make-grid(@class: ~'') {
|
||||||
.float-grid-columns(@class);
|
|
||||||
.loop-grid-columns(@grid-columns, @class);
|
.loop-grid-columns(@grid-columns, @class);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue