Me gustaría tener A By Calineado en el medio.
¿Cómo puedo llegar Da ir completamente a la derecha?
ANTES DE:
DESPUÉS:
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
/* magic to throw to the right*/
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>Respuestas:
A continuación hay cinco opciones para lograr este diseño:
flex: 1Aplicar position: relativeal envase flexible.
Aplicar position: absoluteal artículo D.
Ahora este artículo está absolutamente ubicado dentro del contenedor flexible.
Más específicamente, el elemento D se elimina del flujo de documentos pero permanece dentro de los límites del antepasado posicionado más cercano .
Use las propiedades de desplazamiento CSS topy rightpara mover este elemento a su posición.
Una advertencia para este método es que algunos navegadores pueden no eliminar completamente un elemento flexible en posición absoluta del flujo normal. Esto cambia la alineación de una manera inesperada y no estándar. Más detalles: el elemento flexible colocado de forma absoluta no se elimina del flujo normal en IE11
Con una combinación de automárgenes y un nuevo elemento flexible invisible, se puede lograr el diseño.
El nuevo elemento flexible es idéntico al elemento D y se coloca en el extremo opuesto (el borde izquierdo).
Más específicamente, debido a que la alineación flexible se basa en la distribución del espacio libre, el nuevo elemento es un contrapeso necesario para mantener los tres cuadros centrales centrados horizontalmente. El nuevo elemento debe tener el mismo ancho que el elemento D existente, o los cuadros centrales no estarán centrados con precisión.
El nuevo elemento se elimina de la vista con visibility: hidden.
En breve:
Delemento.automárgenes flexibles para mantener A, By Ccentrado, con ambos Delementos creando el mismo equilibrio desde ambos extremos.visibility: hiddenal duplicadoDEste método es similar al n. ° 2, excepto que es más semántico y el ancho Ddebe ser conocido.
D.::before.automárgenes flexibles para mantener A, By Cperfectamente centrado, con el pseudo y los Delementos creando un equilibrio igual desde ambos extremos.flex: 1a elementos izquierdos y derechosComenzando con el Método n. ° 2 o n. ° 3 anterior, en lugar de preocuparse por el mismo ancho para los elementos izquierdo y derecho para mantener el mismo equilibrio, solo dele cada uno flex: 1. Esto los obligará a ambos a consumir el espacio disponible, centrando así el elemento central.
Luego puede agregar display: flexelementos individuales para alinear su contenido.
NOTA sobre el uso de este método con min-height: Actualmente en Chrome, Firefox, Edge y posiblemente otros navegadores, la regla abreviada seflex: 1divide en esto:
flex-grow: 1flex-shrink: 1flex-basis: 0%Esa unidad de porcentaje (%) en flex-basishace que este método se rompa cuando min-heightse usa en el contenedor. Esto se debe a que, como regla general, las alturas de porcentaje en los elementos secundarios requieren una heightconfiguración de propiedad explícita en el elemento primario.
Esta es una antigua regla CSS que data de 1998 ( CSS Nivel 2 ) que todavía está vigente en muchos navegadores en algún grado u otro. Para detalles completos ver aquí y aquí .
Aquí hay una ilustración del problema publicado en los comentarios del usuario2651804 :
La solución es no usar la unidad de porcentaje. Pruebe pxo simplemente nada ( que es lo que la especificación realmente recomienda , a pesar del hecho de que al menos algunos de los principales navegadores han agregado una unidad de porcentaje por cualquier razón).
Este puede ser el método más limpio y eficiente. No hay necesidad de posicionamiento absoluto, elementos falsos u otros hackers.
Simplemente cree una cuadrícula con múltiples columnas. Luego coloque sus artículos en las columnas del medio y final. Básicamente, solo deje la primera columna vacía.
ul {
display: grid;
grid-template-columns: 1fr repeat(3, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
}
li:nth-child(1) { grid-column-start: 2; }
li:nth-child(4) { margin-left: auto; }
/* for demo only */
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 5px; background: #aaa; }
p { text-align: center; }<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>| true center |</span></p>La manera más fácil
.box{
display:flex;
justify-content:center;
}
.item1{
flex:1;
display: flex;
justify-content: center;
transform: translateX(10px);/*D element Width[if needed]*/
} <div class="box">
<div class="item1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="item2">D</div>
</div>Si desea alinearlo, simplemente puede adjuntar un espacio vacío y dividir los tres tramos secundarios en ellos.
La solución más simple será justificar el centro de contenido al contenedor principal y dar margen automático izquierdo al primer y último elemento secundario.
ul {
display:flex;
justify-content:center;
}
.a,.d {
margin-left:auto;
}<ul>
<li class="a">A</li>
<li>B</li>
<li>C</li>
<li class="d">D</li>
</ul>Usando el display:gridenfoque, simplemente puede poner a todos los ulniños en la misma celda y luego configurar justify-self:
ul {
display: grid;
}
ul > * {
grid-column-start: 1;
grid-row-start: 1;
justify-self:center;
}
ul > *:last-child {
justify-self: right;
}
/* Make Fancy */
li {
display:inline-block;
margin: 1px;
padding: 5px;
background: #bbb;
}<ul>
<span>
<li>A</li>
<li>B</li>
<li>C</li>
</span>
<li>D</li>
</ul>Pregunta muy clara. No pude evitar publicar la respuesta después de unas horas de excavación. Podríamos resolver esto con tablas, tablas de celdas, posiciones absolutas, transformaciones, pero solo teníamos que hacerlo con flexbox :)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}
Amplié en Michael_b 's respuesta
.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) {
flex: 1;
}
.center-flex__2-of-3 > :nth-child(1) {
justify-content: flex-start;
}
.center-flex__2-of-3 > :nth-child(3) {
justify-content: flex-end;
}
.center-flex__1-of-2 > :nth-child(1) {
margin: auto;
}
.center-flex__1-of-2 > :nth-child(2) {
flex: 1;
justify-content: flex-end;
}
.center-flex__2-of-2 > :nth-child(1) {
flex: 1;
justify-content: flex-start;
}
.center-flex__2-of-2 > :nth-child(2) {
margin: auto;
}
.center-flex__1-of-2:before, .center-flex__1-of-1:before {
content: '';
flex: 1;
}
.center-flex__1-of-1:after, .center-flex__2-of-2:after {
content: '';
flex: 1;
}
[class*=center-flex] {
display: flex;
list-style: none;
margin: 0;
padding: 0;
border: 10px solid rgba(0, 0, 0, 0.1);
}
[class*=center-flex] > * {
display: flex;
}
li {
padding: 3px 5px;
}2 of 3
<ul class="center-flex__2-of-3">
<span>
<li>Accusamus</li>
<li>Porro</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
1 of 2
<ul class="akex center-flex__1-of-2">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
</ul>
<br><br>
2 of 2
<ul class="akex center-flex__2-of-2">
<span>
<li>Porro</li>
<li>Culpa</li>
<li>Sit</li>
</span>
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>
<br><br>
1 of 1
<ul class="center-flex__1-of-1">
<span>
<li>Lorem</li>
<li>Dolor</li>
</span>
</ul>Inspirado por el Método # 5: Diseño de cuadrícula CSS de la solución de @Michal Benjamin y porque estoy usando Tailwind y por ahora todavía no tengo acceso a todas las opciones de cuadrícula por defecto. Esto parece funcionar:
ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
PD: ¡No estoy seguro si mezclar flex y grid como esta es una buena idea!
ul {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
li:last-child {
background: #ddd;
position:absolute;
right:10px;
}<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>