Coloque el último elemento flexible al final del contenedor

Question

Coloque el último elemento flexible al final del contenedor

Esta pregunta se refiere a un navegador con soporte completo para css3, incluido flexbox.

Tengo un contenedor flexible con algunos elementos en él. Todos están justificados para flex-start pero quiero el último .end elemento que debe justificarse para flex-end. ¿Hay una buena manera de hacer esto sin modificar el HTML y sin recurrir al posicionamiento absoluto?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

27

css css3 flexbox

Author: Josh Crozier, 2015-11-25

Source

2 answers

Este Flexbox Principal también Funciona Horizontalmente

Durante los cálculos de bases flexibles y longitudes flexibles, márgenes automáticos se tratan como 0.
Antes de la alineación a través de justify-content y align-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Establecer un margen izquierdo automático para el Último elemento hará el trabajo.

.last-item {
  margin-left: auto;
}

Código Ejemplo:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Introduzca aquí la descripción del enlace

Esto puede ser muy útil para pies de página de escritorio.

Como Envato hizo aquí con el logotipo de la empresa.

Codepen Snippet

23

Author: David Ben Dahan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-28 15:00:06

score 70 · Accepted Answer

Módulo de Diseño de Caja Flexible-8.1. Alineación con márgenes automáticos

Los márgenes automáticos en los elementos flex tienen un efecto muy similar a los márgenes automáticos en el flujo de bloques:

Durante los cálculos de bases flexibles y longitudes flexibles, los márgenes automáticos se tratan como 0.

Antes de la alineación a través de justify-content y align-self, cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Por lo tanto, podría usar margin-top: auto para distribuir el espacio entre los otros elementos y el último elemento. Esto posicionará el elemento en la parte inferior.

.end {
  margin-top: auto;
}

También puede evitar el uso de una clase y utilizar el :last-of-type/last-child pseudo clase.

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}
.end {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>