web-dev-qa-db-fra.com

Habillage de texte div Flexbox

Je souhaite créer du texte dans la mise en page de ma flexbox.

Code: https://jsfiddle.net/u2oswnth/2/

.child {
  border: solid 1px;
  display: flex;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

Ce que j'ai: Lorsque vous dépassez la largeur de l'image, .rightdiv tombe à la ligne suivante.

Ce que je veux: Lorsque la largeur de la trame est dépassée, les mots de .rightdiv commencent à se dérouler, deux colonnes restent côte à côte et forment une seule ligne.

htmlcssflexbox
5
StragaSevera

Remplacez flex-wrap: wrap; par flex-wrap: nowrap;. En utilisant flex-wrap: wrap;, vous indiquez à .rightdiv qu'il soit renvoyé à une nouvelle ligne si elle manque d'espace. Comme vous voulez seulement que le texte soit enveloppé, vous devez utiliser flex-wrap: nowrap; pour garder .right sur la même ligne. Le texte sera automatiquement renvoyé à la ligne s'il n'y a pas assez d'espace.

  • Remplacez flex-wrap: wrap; par flex-wrap: nowrap; sur .container

.child {
  border: solid 1px;
  display: flex;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  flex-wrap: nowrap;
}
<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>

8
Hidden Hobbes

REMARQUE: Il n'est pas nécessaire d'appliquer "display: flex" sur la classe enfant et flex-wrap: nowrap; sur la classe conteneur car il s'agit par défaut de nowrap. Ci-dessous est mise à jour réponse et travaux !!.

.child {
  border: solid 1px;
}
.left {
  width: 100px;
}
.container {
  display: flex;
} 

<div class="container">
  <div class="child left">
    Left!
  </div>
  <div class="child right">
    I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
  </div>
</div>
3
solanki...

Vous devriez changer flex-wrap: wrap; en flex-wrap: nowrap;

Veuillez noter que flex-wrap: no-wrap; ( no-wrap avec un tiret ) n'est PAS une valeur valide. Voici la référence doc à ce sujet: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

1
stobasan