Comment aligner les colonnes flexbox à gauche et à droite?

123

Avec le CSS typique, je pourrais faire flotter l'une des deux colonnes à gauche et une autre à droite avec un espace de gouttière entre les deux. Comment ferais-je cela avec flexbox?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

Développer l'extrait

html css flexbox

— archyte
source

279

Vous pouvez ajouter justify-content: space-betweenà l'élément parent. Ce faisant, les éléments flexbox enfants seront alignés sur les côtés opposés avec un espace entre eux.

Exemple mis à jour

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

Afficher l'extrait de code

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Développer l'extrait

Vous pouvez également ajouter margin-left: autoau deuxième élément afin de l'aligner à droite.

Exemple mis à jour

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

Afficher l'extrait de code

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Développer l'extrait

— Josh Crozier
source

4

Hé, pourriez-vous s'il vous plaît expliquer comment l'élément est correctement aligné en utilisant margin-left: autoici?

— hulkinBrain

2

@hulkinBrain, voici l'explication: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

REMARQUE: margin-left: autoet margin-right: autotrick n'est pas compatible avec IE11, pour ceux qui doivent encore le supporter.

— TetraDev

30

J'ai proposé 4 méthodes pour obtenir les résultats. Voici la démo

Méthode 1:

#a {
    margin-right: auto;
}

Méthode 2:

#a {
    flex-grow: 1;
}

Méthode 3:

#b {
    margin-left: auto;
}

Méthode 4:

#container {
    justify-content: space-between;
}

— génie
source

9

Méthode 5: insérez un élément vide supplémentaire avec l' flex:1;endroit où vous voulez que l'espace supplémentaire soit :)

— Adamdport

Ce serait la meilleure réponse, la plus complète, si vous intégriez l'extrait de code au lieu de créer un lien vers jsfiddle.

— styfle

Les méthodes 1 et 3 ne sont pas compatibles avec IE 11!

— Peter Højlund Andersen

1

Une autre option consiste à ajouter une autre balise avec du flex: autostyle entre vos balises que vous souhaitez remplir dans l'espace restant.

https://jsfiddle.net/tsey5qu4/

Le HTML:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

Le CSS:

.fill-remaining-space {
  flex: auto;
}

Cela équivaut à flex: 1 1 auto, qui absorbe tout espace supplémentaire le long de l'axe principal.

— Konyak
source

0

Il existe différentes manières mais le plus simple serait d'utiliser l'espace entre voir l'exemple à la fin

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

voir l'exemple

— Ali Adravi
source