Alignement des éléments à gauche et au centre avec flexbox
j'utilise flexbox pour aligner les éléments de mon enfant. J'aimerais centrer un élément et laisser l'autre aligné à gauche. Normalement, je définirais l'élément de gauche en utilisant margin-right: auto. Le problème est que cela pousse l'élément central hors du centre. Est-ce possible sans en utilisant le positionnement absolu?
HTML & CSS
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
width: 500px;
}
#left {
margin-right: auto;
}
#center {
margin: auto;
}<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>6 réponses
EDIT: Voir réponse de Solo ci-dessous, c'est la meilleure solution.
L'idée derrière flexbox est de fournir un cadre pour l'alignement des éléments aux dimensions variables à l'intérieur d'un conteneur. Par conséquent, il est peu logique de fournir une disposition où la largeur d'un élément est totalement ignorée. En substance, c'est exactement ce à quoi sert le positionnement absolu, car il retire l'élément du flux normal.
dans la mesure du comme je le sais, il n'y a pas de bonne façon de le faire sans utiliser position: absolute;, je vous suggère de l'utiliser... mais si vous ne voulez vraiment pas, ou ne pouvez pas utiliser le positionnement absolu, alors je suppose que vous pourriez utiliser l'une des solutions suivantes.
Si vous connaissez la largeur exacte de la "Gauche" div, alors vous pouvez changer justify-contentflex-start (gauche) et puis aligner le div" Center " comme ceci:
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
Si vous ne connaissez pas la largeur, alors vous pouvez dupliquer "Gauche" sur le côté droit, utilisez justify-content: space-between;, et cacher le nouvel élément de droite:
Juste pour être clair, c'est vraiment, vraiment moche... mieux utiliser le positionnement absolu que de dupliquer le contenu. : -)
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
#right {
opacity: 0;
}<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Left</span>
</div>ajouter le troisième élément vide:
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
Et le style suivant:
.parent {
display: flex;
}
.left, .right {
flex: 1;
}
seules la gauche et la droite sont prêtes à croître et grâce aux faits qui...
- il n'y a que deux éléments en croissance (peu importe s'ils sont vides) et
- que les deux obtenir les mêmes largeurs (ils vont distribuer uniformément l'espace disponible)
...l'élément central sera toujours parfaitement centré.
C'est bien mieux que la réponse acceptée à mon avis parce que vous ne devez pas copier le contenu de gauche à droite et le cacher pour obtenir la même largeur pour les deux côtés,ça arrive comme par magie (la flexbox est magique).
en action:
.parent {
display: flex;
}
.left,
.right {
flex: 1;
}
/* Styles for demonstration */
.parent {
padding: 5px;
border: 2px solid #000;
}
.left,
.right {
padding: 3px;
border: 2px solid red;
}
.center {
margin: 0 3px;
padding: 3px;
border: 2px solid blue;
}<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>Essayez ce n'hacks :)
CSS
.container{
width: 500px;
margin: 0 auto;
}
.box{
display: flex;
align-items: center;/* just in case*/
justify-content: space-between;
}
.box p:nth-child(2){
text-align: center;
background-color: lime;
flex: 1 1 0px;
}
HTML
<div class="container">
<div class="box">
<p>One</p>
<p>Two</p>
</div>
</div>
si vous ne voulez pas vous fier au positionnement, le seul moyen que j'ai trouvé pour le rendre vraiment centré est d'utiliser une combinaison de marge automatique et de marge négative pour empêcher l'élément centré d'être poussé par l'élément aligné de gauche. Cela exige que vous connaissiez la largeur exacte de l'élément aligné à gauche.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: center;
}
.block {
width: 120px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
.justify-center {
margin-right: auto;
margin-left: -120px;
}<div class="container">
<div class="block justify-start"></div>
<div class="block justify-center"></div>
</div>j'ai une autre solution. À mon avis, Ajouter un bloc vide à l'élément central est bien, mais du point de vue du code, c'est un peu moche. Ma solution pour cela est ci-dessous
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
#parent {
display: flex;
}
#left {
flex:1;
}
#center {
flex:1;
}
#parent:after {
flex:1;
}
https://jsfiddle.net/u5gonp0a/
.box {
display: flex;
justify-content: center;
background-color: green;
text-align: left;
}
.left {
padding: 10px;
background-color: pink;
}
.center {
padding: 10px;
background-color: yellow;
margin: 0 auto;
}<div class="box">
<div class="left">left</div>
<div class="center">center</div>
</div>