2
votes

Problème d'alignement FlexBox dans les éléments de travée intégrés

Je voudrais m'aligner sur l'élément date / heure span à droite. Je peux le faire en utilisant la propriété float , mais lorsque j'utilise flexbox, je ne peux pas le faire.

Capture d'écran:

Exemple de code:

<div class="flex-container">
  <span class="firstText">some text here..<span class="secondText">13:30</span></span>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background: #777;
}

.flex-container .secondText {
  flex-grow: 1;
}

html css flexbox

4 commentaires

float est le seul moyen de faire ce que vous voulez, flexbox ne fonctionnera pas ici.

Si float: right; fait ce que vous voulez sur plusieurs navigateurs, pourquoi avez-vous besoin d'une autre méthode?

L'attribut Float n'est pas pris en charge dans le projet React Native. J'ai donc besoin d'utiliser flexbox

cette solution vous convient-elle?

3 Réponses :

0
votes

En supposant que vous ayez plusieurs lignes, si vous voulez envelopper le texte autour de la date, vous devrez utiliser float: right , mais si cela ne vous dérange pas de placer la date sur Pour le reste du texte, vous pouvez utiliser position: absolue et le placer dans le coin inférieur droit.

<div class="flex-container">
  <span class="firstText">
    some texrgrgt here.. soehme text here.. 
    someehtext here.. so wtwtg wtg rme text here..
    some text here.. some text here..
    <span class="secondText">13:30</span>
  </span>

</div>

.flex-container {
  display: flex;
  flex-direction: row;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background-color: #177CAB;
  position: relative;
  font-size: 22px;
  line-height: 1.5;
}

.flex-container .secondText {
  background-color: #E1B639;
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0px 10px 0px 10px;
}

0 commentaires

0
votes

Vous pouvez attribuer flex également à la plage externe et utiliser justify-content: space-between; dessus, et margin-left: auto code> sur la plage intérieure pour la déplacer vers la droite. Désormais, par défaut, la plage intérieure serait sur la ligne sous la dernière ligne de texte, mais si vous lui appliquez margin-top: -1em; , elle est déplacée vers le haut:

 

<div class="flex-container">
  <span class="firstText">some text here.. some text here some text here some text here some text here some text here some text here some text here some text here some text here<span class="secondText">13:30</span></span>
</div>
.flex-container {
  display: flex;
  width: 300px;
  margin: auto;
  padding: 10px;
  color: #fff;
  background: #777;
  
}
.firstText {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  }

.secondText {
  margin-left: auto;
  margin-top: -1em;
}

0 commentaires

3
votes

Laissez les deux balises être des flex-items (faites-en les deux enfants immédiats de

  div > ). Ajoutez ensuite  margin-left: auto;  à l'élément que vous souhaitez aligner sur right: 
 

<div class="flex-container">
  <span class="firstText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa orci, euismod elementum porttitor tempor, laoreet ut mauris. Aliquam feuaiat quam ac sem feuaiat hendrerit hendrerit feuaiat evoid overlap. </span>
  <span class="secondText">23:30</span>
</div>
.flex-container {
  font-family: Arial, sans-serif;
  font-size: 12px;
  display: flex;
  justify-content:space-between; 
  width: 300px;
  margin: auto;
  padding: 10px;
  flex-wrap: wrap;
  color: #fff;
  background: #1E79AA;
}

.flex-container .firstText {
  line-height: 1.5;
  text-align: justify; /* optional; text-align: right works too */
}

/* To avoid overlaping of time and plain text!!! */
.flex-container .firstText:after {
  content: "";
  display: inline-block;
  width: 40px;
  line-height: 1.5em;
}

.flex-container .secondText {
  margin-left: auto;
  margin-top: -1.5em;
  height: 1.5em;
  line-height: 1.5em;
  width: 40px;
  background: #FF9500;
  text-align: center;
}

3 commentaires

Merci beaucoup .. Cette solution me convient .. En fait, je ne peux pas utiliser la classe ": after" directement dans mon projet ReatNative. Je suppose que je peux utiliser cette classe psuedo, j'ai besoin d'installer un module npm supplémentaire .. Merci à vous quand même .. :)

@MLElyakan Vous devez également accepter la réponse, en cliquant sur la coche à sa gauche, afin que les autres développeurs sachent quelle réponse est (la plus) valide.

@MLElyakan Ce que j'écrivais dans mon commentaire, c'était accepter , pas voter . Vous devez accepter l'une des réponses que vous avez reçues.