J'ai un conteneur flexible imbriqué. Voici le code:
.parent-container {
display: flex;
background: orange;
}
.child-container {
display: flex;
background: green;
}
.color-block {
background: yellow;
flex: 0 0 15px;
align-self: stretch;
}
3 Réponses :
Utiliser Whitespace: Nowrap; Code> Pour déballer dans la même ligne .child-container {
display: flex;
background: green;
white-space: nowrap;
}
Maintenant, le texte ne s'enroule pas mais trop débordement du fond vert! Il veut que le conteneur s'adapte au texte.
@crupest avez-vous vérifié mon commentaire?
@Karuppiah rk oui! Mais j'ai été lent à vous répondre! Pardon!
Qu'est-ce que vous êtes votre objectif avec cela, comment devrait-il ressembler? Si vous placez la portée dans un autre div avec l'affichage Flex et placez-le, le texte ne s'enveloppez pas.
HTML P>
.parent-container {
display: flex;
background: blue;
}
.child-container {
display: flex;
padding-left: 20px;
background: green;
}
.color-block {
background: yellow;
padding: 5px 10px;
align-self: stretch;
display: flex;
}
Désolé de ne pas expliquer! Je veux juste une étiquette de bloc de couleur devant le texte indiquant l'état de l'élément comme "c'est fait!".
Ah d'accord! J'ai changé un peu CSS, vérifiez maintenant. Le conteneur enfant n'a besoin que d'un rembourrage à gauche, le «statut» sera indiqué alors.
Malgré la question étrange que j'ai mentionnée, votre solution est vraiment bonne! Vraiment merci d'avoir aidé.
Pour ce que vous voulez faire, je peux fortement suggérer d'utiliser l'élément :: Avant l'élément pseudo, je le trouve plus élégant que d'empiler des divs. J'ai ajouté un violon montrant cela.
Ouais! Je ne connais pas très bien ces pseudo-éléments. Cela semble vraiment très élégant. Je vais les apprendre plus tard! Merci d'avoir monté cette idée!
Jsfiddle pourquoi Tu n'essayes pas comme ça au-dessus du code? Supprimer flex: 0 0 15px à flex: 0 0 0 puis ajoutez Padding-gauche: 15px;
le tien est correct
@crupest essayer et sélectionnez-le comme une réponse correcte si elle fonctionne
Excellente solution!
@crupest no pas besoin de remplissage, vous pouvez utiliser une largeur simple comme expliquée dans le double.
@Tmani afif oui. Vous avez raison!
Parce que c'est un conteneur conteneur imbriqué ... Nipping Flexbox peut conduire à un résultat indésirable. Voici un résultat plus étrange: JSFIDDLE.net/14QP9NUZ . Il y a un calcul du cycle complexe où nous ne reculons pas pour rectifier
Ajouter
largeur: 100% dans.child-conteneur classe@Tmani afif peut-être! J'ai cherché plusieurs heures seulement pour trouver de nombreux problèmes étranges sur Flexbox!
@Karuppiah rk je ne veux pas que le conteneur enfant s'étend au parent!
Utilisez la largeur au lieu de flexibilité jusqu'à ce que Flexbox devienne plus stable;)