# ionic 網格(Grid)
ionic 的網格(Grid)和其他大部分框架有所不同,它采用了彈性盒子模型(Flexible Box Model) 。而且在移動端,基本上的手機都支持。row 樣式指定行,col 樣式指定列。
### 同等大小網格
在帶有 row 的樣式的元素里如果包含了 col 的樣式,col 就會設置為同等大小。
以下實例中 row 的樣式包含了 5 個 col 樣式,每個 col 的寬度為 20%。
```
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
```
### 指定列寬
你可以設定一行中各個列的大小不一樣。默認情況下,列都會被劃分為同等大小。但你也可以按百分比來設置列的寬度(一行為 12 個網格)。
```
<div class="row">
<div class="col col-50">.col.col-50</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-75">.col.col-75</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col col-75">.col.col-75</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
```
注意:實例中,每個 col 樣式會自動添加上邊框和灰色背景。
下面列出了指定列寬的一些百分比的樣式名:
| .col-10 | 10% |
|:--- |:--- |
| .col-20 | 20% |
| .col-25 | 25% |
| .col-33 | 33.3333% |
| .col-50 | 50% |
| .col-67 | 66.6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
### 有偏移量的網格
列可以設置左側偏移量,實例如下:
```
<div class="row">
<div class="col col-33 col-offset-33">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-33">.col</div>
<div class="col col-33 col-offset-33">.col</div>
</div>
<div class="row">
<div class="col col-33 col-offset-67">.col</div>
</div>
```
下面是一些百分比的偏移量樣式名:
| .col-offset-10 | 10% |
| .col-offset-20 | 20% |
| .col-offset-25 | 25% |
| .col-offset-33 | 33.3333% |
| .col-offset-50 | 50% |
| .col-offset-67 | 66.6666% |
| .col-offset-75 | 75% |
| .col-offset-80 | 80% |
| .col-offset-90 | 90% |
## 縱向對齊網格
彈性盒子模型可以很容易設置列縱向對齊。縱向對齊包含頂部,中間部分,底部,可以應用到每一行的列,或者指定的某列。
實例中,最后一列設置了最高的內容用于更好的演示縱向對齊網格。
```
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row">
<div class="col col-top">.col</div>
<div class="col col-center">.col</div>
<div class="col col-bottom">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-top">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-bottom">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
```
## 響應式網格
手持設備屏幕在切換時,例如橫屏,豎屏等。就需要設置每行的網格可以實現根據不同寬度自適應大小。
不同設備響應式類的樣式如下:
| 響應式類 | 描述 |
| .responsive-sm | 小于手機橫屏 |
| .responsive-md | 小于平板豎屏 |
| .responsive-lg | 小于平板橫屏 |
```
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
```
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作