Comment aligner flexbox les colonnes de gauche et de droite?

Typique avec CSS je pourrais flotter l'une des deux colonnes de gauche et de nouveau à droite, avec quelques gouttière de l'espace entre les deux. Comment pourrais-je le faire avec flexbox?

http://jsfiddle.net/1sp9jd32/

CSS:

#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;
}

HTML:

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

InformationsquelleAutor archytect | 2015-03-08

227

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

mise à Jour de l'Exemple

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

CSS:

#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;
}

HTML:

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

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

mise à Jour de l'Exemple

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

CSS:

#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;
}

HTML:

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

Hey, pouvez-vous m'expliquer comment l'élément est correctement aligné à droite en utilisant margin-left: auto ici?
voici l'explication: stackoverflow.com/a/33856609/3597276
REMARQUE: margin-left: auto et margin-right: auto astuce est de ne pas IE11 compatible, pour ceux qui ont encore à charge.

InformationsquelleAutor Josh Crozier

27

Je suis venu avec 4 méthodes pour atteindre les résultats. Voici 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;
}
```
- Méthode 5: insérer un supplément élément vide avec flex:1; où vous le voulez de l'espace supplémentaire pour être 🙂
- Ce serait le meilleur, le plus complet de répondre si vous avez intégré l'extrait de code au lieu de le relier à jsfiddle.
- Méthode 1 et la 3 n'est pas compatible avec IE 11!
InformationsquelleAutor geniuscarrier
1

Une autre option est d'ajouter un autre tag avec flex: auto style entre vos balises que vous voulez remplir le reste de l'espace.

https://jsfiddle.net/tsey5qu4/

Le code 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;
}
```
C'est l'équivalent de flex: 1 1 auto, qui absorbe tout espace supplémentaire le long de l'axe principal.

InformationsquelleAutor konyak

Il existe différentes façons, mais la 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

InformationsquelleAutor Ali Adravi

Vous devez vous connecter pour publier un commentaire.