イオングリッド(グリッド)
ionic のグリッドは、他のほとんどのフレームワークとは異なり、フレキシブル ボックス モデルを使用します。そしてモバイル側では、基本的にすべての携帯電話がサポートしています。 row スタイルは行を指定し、col スタイルは列を指定します。
等サイズグリッド
rowスタイルの要素にcolスタイルが含まれている場合、colは同じサイズに設定されます。
次の例では、行スタイルに 5 つの列スタイルが含まれており、各列の幅は 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>
列幅を指定
行内の各列のサイズを異なるように設定できます。デフォルトでは、列は同じサイズに分割されます。ただし、列幅をパーセンテージとして設定することもできます (1 行あたり 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>
注: この例では、各列スタイルにより上部の境界線と灰色の背景が自動的に追加されます。
列幅のパーセンテージを指定するスタイル名を以下に示します:
25%| .col-33 | 33.3333% |
| .col-50 | 50%。 |
| .col-67 | 66.6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
| オフセット付きグリッド | 列は左オフセットを設定できます。例は次のとおりです: |
| ここにいくつかのパーセントオフセットスタイル名があります: | |
| .col-offset-10 | 10% |
.col-offset-20
20%
| .col-offset-33 | 33.3333% |
| .col-オフセット50 | 50% |
| .col-offset-6 7 | 66.6666% |
| .col-offset-75 | 75% |
| .col-offset-80 | 80 % |
| .col-offset-90 | 90% |
| 垂直配置グリッド | |
| この例では、グリッドの垂直方向の配置をわかりやすくするために、最後の列に最高のコンテンツが設定されています。 | |
| レスポンシブグリッド | 横画面、縦画面など、切り替え時の携帯端末の画面。さまざまな幅に応じてサイズを調整するには、各行のグリッドを設定する必要があります。 |
レスポンシブ クラス 説明
.sensitive-sm携帯電話の横長よりも小さい.だ
| .sensitive-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> |
