justificar - como se alinea a la derecha en html
Centrar y alinear a la derecha los elementos flexbox (5)
A continuación hay cinco opciones para lograr este diseño:
- Posicionamiento CSS
- Flexbox con elemento DOM invisible
- Flexbox con pseudo-elemento invisible
-
Flexbox con
flex: 1 - Diseño de cuadrícula CSS
Método # 1: Propiedades de posicionamiento CSS
Aplicar
position: relative
al contenedor flexible.
Aplicar
position: absolute
al ítem D.
Ahora este artículo está absolutamente posicionado 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
top
y
right
para mover este elemento a su posición.
li:last-child {
position: absolute;
top: 0;
right: 0;
background: #ddd;
}
ul {
position: relative;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p {
text-align: center;
margin-top: 0;
}
span {
background-color: aqua;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
Una advertencia para este método es que algunos navegadores pueden no eliminar completamente un elemento flexible absolutamente posicionado 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
Método n. ° 2: márgenes automáticos flexibles y elemento flexible invisible (elemento DOM)
Con una combinación de
márgenes
auto
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:
-
Crea un duplicado del elemento
D - Colóquelo al principio de la lista.
-
Use márgenes
autoflexibles para mantener centradosA,ByC, con ambos elementosDcreando el mismo equilibrio desde ambos extremos. -
Aplicar
visibility: hiddenal duplicadoD
li:first-child {
margin-right: auto;
visibility: hidden;
}
li:last-child {
margin-left: auto;
background: #ddd;
}
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;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }
<ul>
<li>D</li><!-- new; invisible spacer item -->
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
Método n. ° 3: márgenes automáticos flexibles y elemento flexible invisible (pseudo-elemento)
Este método es similar al # 2, excepto que es semánticamente más limpio y se debe conocer el ancho de
D
-
Cree un pseudo-elemento con el mismo ancho que
D -
Colóquelo al comienzo del contenedor con
::before. -
Utilice los márgenes
autoflexibles para mantenerA,ByCperfectamente centrados, con los elementos pseudo yDcreando un equilibrio igual desde ambos extremos.
ul::before {
content:"D";
margin: 1px auto 1px 1px;
visibility: hidden;
padding: 5px;
background: #ddd;
}
li:last-child {
margin-left: auto;
background: #ddd;
}
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;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
Método 4: agregue
flex: 1
a los elementos izquierdo y derecho
Comenzando 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, simplemente dé a cada uno
flex: 1
.
Esto los obligará a ambos a consumir el espacio disponible, centrando así el elemento central.
Luego puede agregar
display: flex
a elementos 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
flex: 1
se desglosa en esto:
-
flex-grow: 1 -
flex-shrink: 1 -
flex-basis: 0%
Esa
unidad de porcentaje (%)
en
flex-basis
hace que este método se rompa cuando se usa la
min-height
en el contenedor.
Esto se debe a que, como regla general, las alturas de porcentaje en los elementos secundarios requieren una configuración de propiedad de
height
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 here y here .
Aquí hay una ilustración del problema publicado en los comentarios del user2651804 :
#flex-container {
display: flex;
flex-direction: column;
background: teal;
width: 150px;
min-height: 80vh;
justify-content: space-between;
}
#flex-container>div {
background: orange;
margin: 5px;
}
#flex-container>div:first-child {
flex: 1;
}
#flex-container::after {
content: "";
flex: 1;
}
<div id="flex-container">
<div>very long annoying text that will add on top of the height of its parent</div>
<div>center</div>
</div>
La solución es no usar la unidad de porcentaje.
Pruebe
px
o 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).
#flex-container {
display: flex;
flex-direction: column;
background: teal;
width: 150px;
min-height: 80vh;
justify-content: space-between;
}
#flex-container > div {
background: orange;
margin: 5px;
}
/* OVERRIDE THE BROWSER SETTING IN THE FLEX PROPERTY */
#flex-container > div:first-child {
flex: 1;
flex-basis: 0;
}
#flex-container::after {
content: "";
flex: 1;
flex-basis: 0;
}
/* OR... JUST SET THE LONG-HAND PROPERTIES INDIVIDUALLY
#flex-container > div:first-child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
#flex-container::after {
content: "";
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
*/
<div id="flex-container">
<div>very long annoying text that will add on top of the height of its parent</div>
<div>center</div>
</div>
Método 5: diseño de cuadrícula CSS
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>
Me gustaría tener
A
B
y
C
alineados en el medio.
¿Cómo puedo hacer que
D
vaya completamente a la derecha?
ANTES DE:
DESPUÉS:
¿Cuál es la mejor práctica para hacer esto?
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>
La respuesta aceptada se puede cambiar un poco porque puede usar áreas de plantilla de cuadrícula y hacerlo sin elemento falso
grid-template-areas ''. b c''
grid-template-columns: 1fr 1fr 1fr
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;
}
Usando el enfoque de
display:grid
, simplemente puede poner todos los hijos
ul
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>
la answer
.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>