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>