end - CSS alinea un elemento a la derecha con flexbox
space between flex (3)
https://jsfiddle.net/vhem8scs/
¿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;
}
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;
}
Para alinear un hijo flexible a la derecha, configúrelo con el
margin-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
.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 estableciendo flex-grow: 1 en el elemento flex del medio (o
flex:1
abreviada
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.
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>
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 usa el
space-between
:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
De esta manera, puede agrupar varios elementos a la derecha (o solo uno).