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 樣式會自動新增上方邊框和灰色背景。

下面列出了指定列寬的一些百分比的樣式名稱:

##10%.col-2020%#.col-2525%.col-3333.3333%#.col-50#50%#.col-6766.6666%#.col-7575%#.col-8080%.col-9090%
#.col-10
有偏移量的網格

列可以設定左側偏移量，實例如下：

<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-1010%##.col- offset-20.col-offset-25. col-offset-33#.col-offset-50 #.col-offset-67#.col-offset-75#.col-offset-80#.col-offset-90
20%
#25%
33.3333%
50%
66.6666%
#75%
80%
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>
###########################################################