Ionic入門二：網格(Grid)頁面布局

ionic 的網格(Grid)和其他大部分框架有所不同，它采用了彈性盒子模型(Flexible Box Model) 。而且在移動端，基本上的手機都支持。row 樣式指定行，col 樣式指定列。

1.同等大小網格

在帶有 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>

 



2.指定列寬

你可以設定一行中各個列的大小不一樣。默認情況下，列都會被划分為同等大小。但你也可以按百分比來設置列的寬度（一行為 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 樣式會自動添加上邊框和灰色背景。
下面列出了指定列寬的一些百分比的樣式名:



3.有偏移量的網格

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

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

 



下面是一些百分比的偏移量樣式名：



4.縱向對齊網格

彈性盒子模型可以很容易設置列縱向對齊。縱向對齊包含頂部，中間部分，底部，可以應用到每一行的列，或者指定的某列。
實例中，最后一列設置了最高的內容用於更好的演示縱向對齊網格。

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

 



5.響應式網格

手持設備屏幕在切換時，例如橫屏，豎屏等。就需要設置每行的網格可以實現根據不同寬度自適應大小。
不同設備響應式類的樣式如下:



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