web-dev-qa-db-ja.com

Ionic 4イオン列充填残り高さ

ion-rowに注釈を付けて残りのスペースを満たす方法

次の例では、黄色の行「コンテンツ」は、残りの（緑の）スペースがすべて使用されるまで拡大します。

<ion-grid style="background-color: green; height: 100%;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

Colorful row example

同様の質問がBootstrapについて尋ねられ、flex-growで解決されました。参照： Bootstrap 4行が残りの高さを埋める

しかし、行/列の構文に固執しながら行を拡張し、より多くのフレックスボックスを導入することはできませんか？

ionic-frameworkionic4
6
d0x

display: flex; flex-flow: columnでグリッドコンテナに注釈を付け、flex-grow: 1でストレッチ行に注釈を付けることができます。

<ion-grid style="background-color: green; height: 100%; display: flex; flex-flow: column;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row style="flex-grow: 1;">
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

次に、このようになります： solution

グリッドが（引き伸ばされるのではなく）圧縮されると、行は互いに内側に移動します。これを防ぐには、すべての行でflex-shrink: 0;を使用します。

7
d0x