CSS alinea un elemento a la derecha con flexbox

212

¿Es posible tener dos elementos alineados a la izquierda y un elemento alineado a la derecha con flexbox? El enlace lo muestra más claramente. El último ejemplo es lo que quiero lograr.

En flexbox tengo un bloque de código. Con float tengo cuatro bloques de código. Esa es una razón por la que prefiero flexbox.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

css alignment flexbox Jens Törnell
fuente

stackoverflow.com/a/33856609/3597276

Michael Benjamin

Respuestas:

525

Para alinear un hijo flexible a la derecha, configúrelo conmargin-left: auto;

De la especificación flex :

Un uso de los márgenes automáticos en el eje principal es separar los elementos flexibles en distintos "grupos". El siguiente ejemplo muestra cómo usar esto para reproducir un patrón de interfaz de usuario común: una sola barra de acciones con algunas alineadas a la izquierda y otras alineadas a la derecha.

.wrap div:last-child {
  margin-left: auto;
}

Violín actualizado

Mostrar fragmento de código

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Expandir fragmento

Nota:

Puede lograr un efecto similar estableciendo flex-grow: 1 en el elemento flex del medio (o taquigrafía flex:1) que empujaría el último elemento completamente hacia la derecha. ( Demo )

Sin embargo, la diferencia obvia es que el elemento central se hace más grande de lo que podría ser necesario. Agregue un borde a los elementos flexibles para ver la diferencia.

Manifestación

Mostrar fragmento de código

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}

<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="wrap grow">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Expandir fragmento

Danield
fuente

¡Gracias! Intenté otra cosa que funcionó antes de leer esto. Era establecer flex-grow: 1 en el elemento que debería empujar al otro. Funcionó también. ¿Sabes cuáles de ellos son mejores y por qué?

Jens Törnell

Gran respuesta. Por lo tanto, el margen no ocupa espacio adicional, y el flex: 1 lo hace. ¡Frio!

Jens Törnell

@ JensTörnell, el automargen utiliza el espacio vacío en el contenedor para separar los elementos flexibles. La propiedad flex-grow/ flextoma ese espacio vacío, lo asigna al elemento flexible, que se expande en esa cantidad. Según lo mencionado por Danield, el último método hace que el elemento Flex DOS sea más grande, lo que quizás no desee.

Michael Benjamin

No todos los héroes usan capa.

Tom

@ user1063287 para alinear varios elementos a la derecha, simplemente aplique el margen izquierdo: auto en el primer elemento que debe alinearse a la derecha. Entonces, digamos que desea que los últimos 4 elementos div:nth-last-child(4) { margin-left: auto } estén

Danield

Para una opción de Flexbox pura y concisa, agrupe los elementos alineados a la izquierda y los elementos alineados a la derecha:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

y uso space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

De esta manera, puede agrupar varios elementos a la derecha (o solo uno).

https://jsfiddle.net/c9mkewwv/3/

derrame
fuente

Esto funciona, pero si no cambia los elementos dentro de cada grupo para que sean display: inline;o display: inline-block;, entonces se apilan en lugar de todos en una fila como flexbox de lo contrario los tendría.

The DIMM Reaper

@TheDIMMReaper No estoy seguro de ver el problema. ¿Podrías expandirte?

flujo

Solo quiero decir cómo cambiaste las etiquetas inmediatamente Oney Twode divs a spans: si todavía display: block;estuvieran, fluirían a líneas separadas. Dado que el OP originalmente tenía divs, solo quería señalar que simplemente ponerlos dentro de otro divno funcionaría sin cambiar la visualización de las etiquetas originales.

The DIMM Reaper

Sí, dado que los elementos ahora están en un nivel inferior, display: flexya no influye en su diseño. Si desea usar div, sí, inlineo inline-blockfuncionaría. Pero también, obviamente, flexya que lo estamos usando por defecto flex-direction: rowcon los padres primarios. ex. jsfiddle.net/ynbb5964/2

flujo

Gracias, probé align-self: flex-end, pero ¿por qué no funciona?

Anand

Para alinear algunos elementos (headerElement) en el centro y el último elemento a la derecha (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}

Satvik Vats
fuente