web-dev-qa-db-fra.com

Comment centrer un élément flexible et un autre à droite en utilisant Flexbox

Je suis totalement nouveau sur Flexbox et je voulais aligner les boutons, mais je ne voyais pas comment gérer le cas courant avec un bouton aligné au centre et un bouton aligné à droite sur la même ligne en utilisant uniquement Flexbox.

Cependant, j'ai trouvé un moyen d'utiliser un élément invisible aligné à gauche et de même longueur que l'élément aligné à droite et le flex justify-content avec space-between pour que l'élément du milieu soit centré sur la ligne.

Existe-t-il un moyen plus direct avec Flexbox?

.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;
  }
<div class="flexcontainer">
  <div class="iteminvisible">Other</div>
  <div class="itemcenter">One</div>
  <div class="itemright">Other</div>
</div>
htmlcsscss3flexbox
41
resander

En utilisant justify-content: space-between avec un élément invisible de flex, comme décrit dans votre question, est un bon moyen de réaliser la mise en page souhaitée. Notez simplement que l'élément du milieu ne peut être centré que si les éléments de gauche et de droite ont la même longueur ( voir la démo ).

Une autre solution que vous pouvez envisager consiste à utiliser auto marges et positionnement absol . Deux avantages de cette méthode ne nécessitent pas de majoration supplémentaire et un centrage réel peut être obtenu quelle que soit la taille de l’élément. Un inconvénient est que l’élément centré est supprimé de flux de documents (ce qui peut être important ou non 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 flexibles le long de l'axe principal (voir encadrés # 62-78).

19
Michael_B
   .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;
   }
10
Dots Me