web-dev-qa-db-fra.com

Flexbox float right

Je recherche des solutions sur Flexbox meilleure pratique de mise en page pour un cas d'utilisation courant.

example

Dans l'exemple, je veux utiliser Flexbox pour que le numéro de partition soit flottant à droite. J'ai pensé utiliser:

position: absolute,
right: 0,

Mais le problème est que nous ne pouvons pas utiliser l'alignement du centre avec la boîte extérieure.

Une autre façon dont je peux penser est de créer une autre boîte flexible pour envelopper l'image et le nom de la partie, puis de créer une boîte souple externe à utiliser.

justifyContent: 'space-between'

faire la mise en page attendue.

Cela semble être un paradigme d’assurance-chômage très courant. Je me demande quelle est la meilleure pratique. Merci beaucoup!

csscss3react-nativeflexbox
24
Martin Konicek

Utilisez ce guide génial pour répondre aux questions courantes Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox)

Pseudocode:

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <ProfilePicture />
  <Text style={{flex: 1}}>{username}</Text>
  <ScoreNumber />
</View>

Cela rend les 3 éléments côte à côte, le Text occupant tout l’espace disponible, poussant le ScoreNumber à droite.

9
Martin Konicek

Cela vous aidera

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}
<div class="parent">
  <div class="child1">left</div>
  <div class="child2">right</div>  
</div>
62
pradeep1991singh

Utilisation justify-content: space-between il remplit Poussez les éléments sur les côtés;

.flex {
 display: flex;
 justify-content: space-between;
}

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

.one {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.two {
  border: 1px solid black;
  width: 20px; height: 20px;
}

.three {
  border: 1px solid black;
  width: 20px; height: 20px;
}
Growing middle element
<div class="flex">
  <div class="one"></div><div class="two flex-grow"></div><div class="three"></div>
</div>

Without growing element
<div class="flex">
  <div class="one"></div><div class="two"></div><div class="three"></div>
</div>

Without middle element
<div class="flex">
  <div class="one"></div><div class="three"></div>
</div>

Reportez-vous à ce didacticiel pour comprendre facilement le comportement de flex box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5
BitOfUniverse