Rendre le remplissage div restant * horizontal * espace dans flexbox


205

J'ai 2 divs côte à côte dans une flexbox. Celui de droite doit toujours avoir la même largeur, et je veux que celui de gauche saisisse simplement l'espace restant. Mais ce ne sera pas le cas, sauf si j'ai défini spécifiquement sa largeur.

Donc, pour le moment, il est réglé à 96%, ce qui semble correct jusqu'à ce que vous écrasiez vraiment l'écran - puis le div de droite devient un peu affamé de l'espace dont il a besoin.

Je suppose que je pourrais le laisser tel quel, mais ça ne va pas - comme s'il devait y avoir un moyen de dire:

la bonne est toujours la même; vous à gauche - vous obtenez tout ce qui reste

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

Réponses:


325

Utilisez la flex-growpropriété pour qu'un élément flexible consomme de l'espace libre sur l'axe principal .

Cette propriété étendra l'élément autant que possible, en ajustant la longueur aux environnements dynamiques, tels que le redimensionnement de l'écran ou l'ajout / la suppression d'autres éléments.

Un exemple courant est flex-grow: 1ou, en utilisant la propriété de raccourci,flex: 1 .

Par conséquent, au lieu de width: 96%votre div, utilisez flex: 1.


Tu as écrit:

Donc, pour le moment, il est réglé à 96%, ce qui semble correct jusqu'à ce que vous écrasiez vraiment l'écran - puis le div de droite devient un peu affamé de l'espace dont il a besoin.

L'écrasement du div à largeur fixe est lié à une autre propriété flex: flex-shrink

Par défaut, les éléments flexibles sont définis sur flex-shrink: 1ce qui leur permet de rétrécir afin d'éviter un débordement du conteneur.

Pour désactiver cette fonction, utilisez flex-shrink: 0.

Pour plus de détails, voir laflex-shrink section Facteur dans la réponse ici:


En savoir plus sur l'alignement flexible le long de l' axe principal ici:

En savoir plus sur l'alignement flexible le long de l' axe transversal ici:


1
J'ai eu la même situation et l'utilisation flex-grow: 1n'a pas eu les mêmes effets que flex: 1. Savez-vous peut-être pourquoi c'est différent? (J'ai résolu mon problème avec ce dernier, thx)
WhGandalf

4
Avec flex-grow: 1, la flex-basispropriété reste à autosa valeur par défaut. Avec flex: 1, la flex-basispropriété devient 0. Voir ma réponse ici pour un examen approfondi: stackoverflow.com/q/43520932/3597276 @WhGandalf
Michael Benjamin

flex-shrink était la clé pour moi :)
pixelearth

25

Fondamentalement, j'essayais d'obtenir que mon code ait une section centrale sur une «ligne» pour s'ajuster automatiquement au contenu des deux côtés (dans mon cas, un séparateur de ligne pointillée). Comme l'a suggéré @Michael_B, la clé utilise display:flexsur le conteneur de ligne et s'assure au moins que votre conteneur du milieu sur la ligne a une flex-growvaleur d'au moins 1 supérieure aux conteneurs externes (si les conteneurs externes n'ont aucune flex-growpropriété appliquée, conteneur du milieu n'a besoin que de 1 pour flex-grow).

Voici une photo de ce que j'essayais de faire et un exemple de code pour savoir comment je l'ai résolu.

Modifier: la bordure inférieure en pointillés sera probablement bizarre selon la façon dont votre navigateur l'affiche. Je recommanderais personnellement d'utiliser un SVG de cercle noir comme image d'arrière-plan répétée, correctement dimensionné et positionné au fond du conteneur du milieu. Ajoutera cette solution alternative lorsque j'aurai le temps.

entrez la description de l'image ici

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}
<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.