¿Cómo alinear las columnas flexbox a la izquierda y a la derecha?

121

Con CSS típico, podría hacer flotar una de las dos columnas a la izquierda y otra a la derecha con un espacio intermedio. ¿Cómo haría eso 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>

Expandir fragmento

html css flexbox

— archytect
fuente

278

Podrías agregar justify-content: space-betweenal elemento padre. Al hacerlo, los elementos de flexbox secundarios se alinearán en lados opuestos con espacio entre ellos.

Ejemplo actualizado

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

Mostrar fragmento de código

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

Expandir fragmento

También puede agregar margin-left: autoal segundo elemento para alinearlo a la derecha.

Ejemplo actualizado

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

Mostrar fragmento de código

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

Expandir fragmento

— Josh Crozier
fuente

4

Oye, ¿podrías explicar cómo el elemento se alinea correctamente usando margin-left: autoaquí?

— hulkinBrain

2

@hulkinBrain, aquí está la explicación: stackoverflow.com/a/33856609/3597276

— Michael Benjamin

2

NOTA: margin-left: autoy el margin-right: autotruco no es compatible con IE11, para aquellos que aún tienen que admitirlo.

— TetraDev

30

Se me ocurrieron 4 métodos para lograr los resultados. Aquí está la demostración

Método 1:

#a {
    margin-right: auto;
}

Método 2:

#a {
    flex-grow: 1;
}

Método 3:

#b {
    margin-left: auto;
}

Método 4:

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

— genio portador
fuente

9

Método 5: inserte un elemento vacío adicional flex:1;donde desee que esté el espacio adicional :)

— adamdport

Esta sería la mejor y más completa respuesta si insertara el fragmento de código en lugar de vincularlo a jsfiddle.

— styfle

¡Los métodos 1 y 3 no son compatibles con IE 11!

— Peter Højlund Andersen

1

Otra opción es agregar otra etiqueta con flex: autoestilo entre sus etiquetas que desea completar en el espacio restante.

https://jsfiddle.net/tsey5qu4/

El HTML:

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

El CSS:

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

Esto es equivalente a flex: 1 1 auto, que absorbe cualquier espacio adicional a lo largo del eje principal.

— Konyak
fuente

0

Hay diferentes formas, pero la más simple sería usar el espacio entre ver el ejemplo al final.

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

mira el ejemplo

— Ali Adravi
fuente