web-dev-qa-db-fra.com

empêcher les lignes d'habillage dans l'élément enfant flexbox

Comment empêcher le retour à la ligne d'un élément flexbox? Est-ce même possible?

J'essaie de créer une grille à deux colonnes avec flexbox avec le balisage suivant:

<div class="flex-container">
   <div class="no-wrap">this should not wrap</div>
   <div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div>
</div>

L'élément .no-wrap Ne doit être aussi large que "nécessaire" de sorte que tout le texte à l'intérieur ne passe pas à une deuxième ligne. L'élément .can-wrap Occupera l'espace restant et se terminera si nécessaire.

J'utilise ce CSS (avec prefrix gratuit):

.flex-container{
  display:flex;
}

.no-wrap{
  flex-basis:initial;
}

Je pensais que flex-basis:initial Empêcherait l'élément de boucler les lignes - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

Voici un codepen: http://codepen.io/jshawl/pen/bknAc

Je sais que je peux fixer la largeur de l'élément .no-wrap, Mais comment puis-je le rendre suffisamment large pour empêcher le retour à la ligne?

L'équivalent flottant de l'élément .no-wrap Serait:

.no-wrap{
  display:block;
  float:left; /* be as wide as need be! */
}
cssflexbox
34
jessh

La propriété que vous recherchez est flex-shrink, pas flex-based.

.no-wrap{
  flex-shrink: 0;
}

Notez cependant qu'IE10 n'est pas répertorié comme prenant en charge cette propriété (car elle n'existait pas dans la spécification au moment où ils ont ajouté la Flexbox). Vous pouvez utiliser la flex propriété à la place.

.no-wrap{
  flex: 0 0 auto; 
}
43
cimmanon