CSS alinea un elemento a la derecha con flexbox

Solución:

Para alinear un niño flexible a la derecha, ajústelo conmargin-left: auto;

De la especificación flexible:

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

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

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

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

Manifestación

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

Para una opción de caja flexible 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 use space-between:

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

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

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

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

---

---

Utiliza Nuestro Buscador