web-dev-qa-db-fra.com

Aligner les éléments à gauche et au centre avec la flexbox

J'utilise flexbox pour aligner mes éléments enfants. Ce que j'aimerais faire, c'est centrer un élément et laisser l'autre aligné à l'extrême gauche. Normalement, je définirais simplement l'élément de gauche en utilisant margin-right: auto. Le problème, c'est que l'élément central est décentré. Est-ce possible sans avec un 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>

htmlcsscss3flexbox
26
Carl Edwards

Ajouter un 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 vont grandir et grâce aux faits qui ...

  • il n'y a que deux éléments en croissance (peu importe si vide) et
  • que les deux aient les mêmes largeurs (ils répartiront également l'espace disponible)

... L'élément central sera toujours parfaitement centré.

C’est bien mieux qu’une réponse acceptée à mon avis car il n’est pas nécessaire de copier le contenu de gauche à droite et de le cacher pour obtenir la même largeur des deux côtés, cela se produit 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>

33
Solo

Essayez ceci pas de piratage :)

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>

http://codepen.io/whisher/pen/XpGaEZ

1
Whisher

J'ai une autre solution. À mon avis, l'ajout d'un bloc vide à l'élément central est une bonne chose, mais au niveau du code, c'est un peu moche. Ma solution est la suivante

    <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;
   }
1
Thiwanka Dodanwela

Si vous ne voulez pas vous fier au positionnement, le seul moyen que j'ai trouvé qui le rende vraiment centré consiste à 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é à gauche. Cela nécessite cependant de connaître 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>

0
Blizwire