CSS alinear un elemento a la derecha con flexbox

Question

CSS alinear un elemento a la derecha con flexbox

¿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 de las razones por las 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;
}

95

css alignment flexbox

Author: Jens Törnell, 2016-02-08

Source

2 answers

Para una opción concisa y pura de flexbox, 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 use 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 /

16

Author: spflow,
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
2017-06-24 18:19:59

score 226 · Accepted Answer

Para alinear un niño flex a la derecha, póngalo con margin-left: auto;

De la especificación flex :

Un uso de márgenes automáticos en el eje principal es separar 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 algunos alineados a la izquierda y otros alineados a la derecha.

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

Fiddle actualizado

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

Nota:

Podría lograr un efecto similar estableciendo flex-grow:1 en el elemento flex medio (o abreviatura flex:1) que empujaría el último elemento hasta la derecha. (Demo)

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

Demo

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