30 votes

Comment utiliser flex-grow?

Dans la doc et dans le cadre de Bootstrap v4 (ici), je n'arrive pas à voir plan sur le soutien à l' 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 j'aimerais réaliser:

image

Le bouton exporter est toujours sur la droite, et le bouton de navigation prend tout l'espace disponible et, par conséquent, l'air propre.

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

35voto

Michael Coker Points 43212

utiliser .col pour un simple flex-grow: 1;. 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>

29voto

KacosPro Points 540

Pour toute personne à venir ici, à partir d'une recherche sur google (comme moi).

Depuis Bootstrap v 4.1 il y a flex-grow et flex-shrink utilitaires, comme la documentation dit 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>

0voto

LTroya Points 159

J'ai créé une classe pour cela, j'ai vérifié, le fichier de Bootstrap docs et n'a rien trouvé à ce sujet.

.flex-2 { flex-grow: 2 }

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X