Come allineare le colonne flexbox a sinistra ea destra?

122

Con i CSS tipici potrei far fluttuare una delle due colonne a sinistra e un'altra a destra con un po 'di spazio in mezzo. Come lo farei con 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>

Espandi lo snippet

html css flexbox

— archytect
fonte

278

Potresti aggiungere justify-content: space-betweenall'elemento genitore. In tal modo, gli elementi flexbox figli saranno allineati ai lati opposti con uno spazio tra di loro.

Esempio aggiornato

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

Mostra snippet di codice

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

Expand snippet

Puoi anche aggiungere margin-left: autoal secondo elemento per allinearlo a destra.

Esempio aggiornato

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

Mostra snippet di codice

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

Expand snippet

— Josh Crozier
fonte

4

Ehi, potresti spiegare come l'elemento viene allineato correttamente a destra usando margin-left: autoqui?

— hulkinBrain

2

@hulkinBrain, ecco la spiegazione: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

NOTA: margin-left: autoe il margin-right: autotrucco non è compatibile con IE11, per chi deve ancora supportarlo.

— TetraDev

30

Ho escogitato 4 metodi per ottenere i risultati. Ecco la demo

Metodo 1:

#a {
    margin-right: auto;
}

Metodo 2:

#a {
    flex-grow: 1;
}

Metodo 3:

#b {
    margin-left: auto;
}

Metodo 4:

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

— geniuscarrier
fonte

9

Metodo 5: inserisci un elemento vuoto in più flex:1;dove vuoi che sia lo spazio extra :)

— adamdport

Questa sarebbe la risposta migliore e più completa se incorporassi lo snippet di codice invece di collegarlo a jsfiddle.

— stile

I metodi 1 e 3 non sono compatibili con IE 11!

— Peter Højlund Andersen

1

Un'altra opzione è aggiungere un altro tag con uno flex: autostile tra i tag che desideri riempire nello spazio rimanente.

https://jsfiddle.net/tsey5qu4/

L'HTML:

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

Il CSS:

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

Questo è equivalente a flex: 1 1 auto, che assorbe lo spazio extra lungo l'asse principale.

— Konyak
fonte

0

Ci sono diversi modi, ma il più semplice sarebbe usare lo spazio tra vedere l'esempio alla fine

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

guarda l'esempio

— Ali Adravi
fonte