web-dev-qa-db-fra.com

Ionic 4 ion-row fill restant hauteur

Comment annoter un ion-row pour qu'il remplisse l'espace restant?

Pour l'exemple suivant, la ligne jaune "Contenu" doit s'étendre jusqu'à ce que tout l'espace (vert) restant soit occupé.

<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

Une question similaire a été posée Bootstrap et a été résolue avec flex-grow. Voir: Bootstrap 4 rangées de hauteur restante

Mais pouvons-nous étirer la ligne tout en respectant la syntaxe ligne/colonne et ne pas introduire plus de flexbox?

ionic-frameworkionic4
6
d0x

Il est possible d'annoter le conteneur de grille avec display: flex; flex-flow: column et la ligne d'étirement avec 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>

Ensuite, cela ressemblera à ceci: solution

Lorsque la grille est compressée (au lieu d'être étirée), les rangées se déplacent les unes dans les autres. Pour éviter cela, utilisez flex-shrink: 0; sur chaque ligne.

7
d0x