web-dev-qa-db-fra.com

Comment utiliser flex-grow?

Dans la doc et dans les numéros de Bootstrap v4 (ici) , je ne vois aucun plan pour supporter flex-grow, quelque chose avec une syntaxe comme celle-ci par exemple: 

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

Voici un exemple de la mise en page que je voudrais créer:

image

Le bouton d'exportation est toujours à droite et le bouton de navigation occupe tout l'espace restant et semble donc propre.

Est-il possible de construire une telle mise en page déjà? Peut-être que ce n'est pas conseillé? Bien sûr, il existe des solutions de contournement utilisant CSS, mais je cherche une solution propre, idéalement en utilisant les noms de classe Bootstrap uniquement pour garantir la cohérence.

csslayoutflexboxbootstrap-4
25
Eric Burel

utilisez .col pour un flex-grow: 1; simple. Il est décrit ici https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>

29
Michael Coker

Pour tous ceux qui viennent ici à partir d'une recherche Google (comme moi).

Depuis Bootstrap v 4.1, il existe des utilitaires flex-grow et flex-shrink. Le documentation indique que vous pouvez les utiliser comme ceci:

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

Voici un petit exemple

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
</div>

21
KacosPro

J'ai créé une classe pour cela, j'ai vérifié la documentation Bootstrap et rien trouvé à ce sujet.

.flex-2 { flex-grow: 2 }

col-auto prend l'espace restant, mais si vous avez plus d'une ligne, l'espace ne sera pas distribué de manière égale. C'est pourquoi flex-grow fait l'affaire.

0
LTroya