Comment centrer-aligner un élément flex et droit-aligner un autre en utilisant Flexbox [dupliquer]
cette question a déjà une réponse ici:
- éléments de flexbox de Centre et de droite 2 réponses
Je suis totalement nouveau à Flexbox et je voulais aligner des boutons, mais je ne pouvais pas voir comment gérer le cas commun avec un bouton aligné au centre et un bouton aligné à droite sur la même ligne, en utilisant seulement Flexbox.
cependant, j'ai trouvé un moyen qui a utilisé un élément invisible aligné à gauche de la même longueur que l'élément aligné à droite et le flex justify-content avec space-between pour faire l'élément central sur la rangée.
Existe-t-il un moyen plus direct avec Flexbox?
css lang-css prettyprint-override">.flexcontainer {
display: flex;
justify-content: space-between;
width: 500px;
height: 200px;
}
.iteminvisible {
flex: 0 1 auto;
width: 100px;
height: 100px;
visibility: hidden;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
}
html lang-html prettyprint-override"><div class="flexcontainer">
<div class="iteminvisible">Other</div>
<div class="itemcenter">One</div>
<div class="itemright">Other</div>
</div>
3 réponses
L'utilisation de justify-content: space-between avec un élément flex invisible, comme décrit dans votre question, est un bon moyen de réaliser la mise en page que vous voulez. Il suffit de noter que l'élément du milieu ne peut être centré que si les deux éléments de gauche et de droite sont de longueur égale ( voir Démo ).
une autre solution que vous pouvez envisager est auto marges et positionnement absolu . Deux avantages de cette méthode sont pas nécessaire pour la marge supplémentaire et le centrage vrai peut être réalisé indépendamment de la taille des articles. Un inconvénient est que l'article centré est retiré du document flow (qui peut ou non Compter pour vous).
.flexcontainer {
display: flex;
justify-content: flex-start; /* adjustment */
position: relative; /* new */
width: 500px;
height: 200px;
}
.itemcenter {
flex: 0 1 auto;
width: 150px;
height: 100px;
position: absolute; /* new */
left: 50%;
transform: translateX(-50%);
}
.itemright {
flex: 0 1 auto;
width: 100px;
height: 100px;
margin-left: auto; /* new */
}<div class="flexcontainer">
<div class="itemcenter">One</div>
<div class="itemright">Other</div>
</div>plus de détails ici: méthodes pour aligner les éléments Flex le long de l'axe principal (voir les encadrés #62-78).
.container {
display: flex;
flex-direction: column; //this will allow flex-end to move item to the right
align-items: center;
}
.right-item {
align-self: flex-end;
}
D'après ce que je comprends, le bouton que vous voulez" flotter "à droite ne devrait pas être flex: 0 1 auto mais plutôt flex: 0 0 auto . Le premier paramètre dans le style flex dicte si un élément doit croître. Si vous ne voulez pas qu'il remplisse plus d'espace que nécessaire, ne lui dites pas de grandir.