web-dev-qa-db-fra.com

Faire en sorte que le remplissage de div soit un * horizontal * espace dans flexbox

J'ai 2 divs côte à côte dans une boîte souple. La main droite doit toujours avoir la même largeur, et je veux que la main gauche prenne tout simplement l’espace restant. Mais ce ne sera pas sauf si je règle 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. Le div de la main droite manque alors un peu de l'espace dont il a besoin.

J'imagine que je pourrais le laisser tel quel, mais on se sent mal, comme s'il devait y avoir un moyen de dire:

le droit est toujours le même; à 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>
htmlcsscss3flexbox
137
Adam Benson

Utilisez la propriété flex-grow pour faire en sorte qu'un élément souple 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/suppression d'autres éléments.

Un exemple courant est flex-grow: 1 ou, à l'aide de la propriété abrégée, flex: 1.

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

Vous avez écrit:

Donc, pour le moment, il est réglé à 96%, ce qui semble correct jusqu'à ce que vous écrasiez vraiment l'écran. Le div de la main droite manque alors un peu de l'espace dont il a besoin.

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

Par défaut, les éléments flex sont réglés sur flex-shrink: 1, ce qui leur permet de se réduire afin d'éviter tout débordement du conteneur.

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

Pour plus de détails, voir La section flex-shrink factor de la réponse ici:

En savoir plus sur l’alignement de flexion le long de l’axe principal ici:

En savoir plus sur l’alignement de flexion le long de l’axe transversal ici:

215
Michael_B

Essentiellement, j'essayais d'obtenir dans mon code une section médiane sur une "ligne" pour s'ajuster automatiquement au contenu des deux côtés (dans mon cas, un séparateur de ligne en pointillé). Comme @Michael_B l'a suggéré, la clé utilise display:flex sur le conteneur de lignes et s'assure au moins que le conteneur du milieu sur la ligne a une valeur flex-grow d'au moins 1 (si les conteneurs externes ne possèdent flex-grow propriétés appliquées).

Voici une photo de ce que j'essayais de faire et un exemple de code pour résoudre ce problème.

Edit: La bordure inférieure en pointillé aura probablement l’air bizarre en fonction de la façon dont votre navigateur l’affiche. Je recommande personnellement d'utiliser un cercle noir SVG comme image d'arrière-plan répétée, correctement dimensionné et positionné au bas du conteneur du milieu. Ajoutera cette solution alternative quand j'aurai le temps.

enter image description here

.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>
17
Brett84c