iView柵格的使用

通常狀況下柵格系統都會把每行row分爲12列,可是iview是採用了24柵格系統，將區域進行24等分

基礎用法 實例代碼：

 

<template>

　　<Row>

　　　　<Col span="12">col-12</Col>

　　　　<Col span="12">col-12</Col>

　　</Row> <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>

</template>

 

區塊間隔 

　　經過給 row 添加 gutter 屬性，能夠給下屬的 col 添加間距，推薦使用 (16+8n)px 做爲柵格間隔。

　　注意：在實際開發中須要給col裏面的div加上背景顏色才能看出效果，若是是給col加背景則會看不出效果，由於間隔仍是屬於col的部分

　　  

　　　　　　　　　　　　　　　　　　　　　　　　效果圖　

　　<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>

柵格順序(Flex)

　　經過 Flex（彈性佈局） 佈局的order來改變柵格的順序。

　　說明：這裏是經過設置row的type爲fiex,再經過設置col的order來設置它顯示的順序

　　

　　　　　　　　　　　　　　　　　　　　效果圖　　

 

　　<Row type="flex">

　　　　 <Col span="6" order="4">1 </Col>

　　　　<Col span="6" order="3">2</Col>

　　　　<Col span="6" order="2">3</Col>

　　　　<Col span="6" order="1">4</Col>

　　</Row>

 

　　除上面的方法還能夠經過設置 push 和 pull 來改變柵格的順序。 pull 拉（拉向前）柵格向左移動格數， push 推（推向後）柵格向右移動格數

　

　　<Row>

　　　　<Col span="18" push="6"> 推向後

　　　　　　qwert

　　　　</Col>

　　　　<Col span="6" pull="18"> 拉向前

　　　　　　asdfg

　　　　</Col>

　　</Row>

 

左右偏移

　　經過設置 offset屬性，將列進行左右偏移設置，偏移柵格數爲offset的值。

　　 offset柵格左側的間隔格數

　　

 

　　<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>

 

 Flex佈局（彈性佈局）

 　　經過給row設置參數justify爲不一樣的值，來定義 子元素 的排布方式。在flex模式下有效。

　　flex 佈局的水平排列方式，可選值爲start（向左排列）、end（向右排列）、center（居中排列）、space-around（等寬排列）、space-between（分散排列）

　　注：等寬排列和分散排列的區別是，分散排列會有左右兩邊的邊距，等寬排列左右兩邊是緊靠父元素的

　　 <template>

　　　　 <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>

　　</template>

 

Flex對齊

　　經過給row設置參數 align 爲不一樣的值，來定義子元素在垂直方向上的排布方式。在flex模式下有效。

　　flex 佈局下的垂直對齊方式，參數 align可選值爲top（頂部對齊）、middle（居中對齊）、bottom（底部對齊）

　　

　　 <template>

　　　　　　<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>

　　　</template>

 響應式佈局

 　　iview預設六個響應尺寸：xs sm md lg xl xxl

　　<!--  xs < 768px, 768px <= sm < 992px, 992px <= md < 1200px, lg > 1200px   -->

　　　　　　　　　　　　　　　　下面是lg寬度屏幕下的顯示效果

　　

 

　　<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>

 

 其它屬性的響應式

 

　　span  pull  push  offset  order 屬性能夠經過內嵌到 xs sm   md  lg 屬性中來使用。其中 :xs="6" 至關於 :xs="{ span: 6 }"。

　　　　　　　　　　　　　　　　下面是在lg寬度屏幕下的效果

　　

　　要注意IView採用了24柵格系統，使用時它們的和，包括偏移（offset）加起來要等於24

 

　　<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>

 

 

實例：

<div class="box-b">
　　<Row :gutter="16">
　　　　<!-- xs 0 ~ 575px, sm 576px ~ 767px, md 768px ~ 991px -->
　　　　<!-- lg 992px ~ 1199px, xl 1200px ~ 1599px, xxl ≥ 1600px-->
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　jquery
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KAKSHHGD
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KDJAAFVDD
　　　　　　</div>
　　　　</Col>
　　　　<Col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" :xxl="6">
　　　　　　<div class="box-b-a01">
　　　　　　　　KDJAAFVDD
　　　　　　</div>
　　　　</Col>
　　</Row>
</div>