Cómo justificar un solo elemento de caja flexible (anular el contenido de justificación)

322
Mahks 2014-05-13 15:55.

Puede anular align-itemscon align-selfpara un elemento flexible. Estoy buscando una forma de anular justify-contentun elemento flexible.

Si tuviera un contenedor flexbox con justify-content:flex-end, pero desea que sea el primer elemento justify-content: flex-start, ¿cómo se podría hacer?

Esto fue mejor respondido por esta publicación: https://stackoverflow.com/a/33856609/269396

css flexbox

6 answers

600
Pavlo 2015-12-04 00:42.

No parece haberlo justify-self, pero puede lograr un ajuste de resultado similar apropiado marginpara auto¹. P.ej. para flex-direction: row(predeterminado) debe configurar margin-right: autopara alinear al niño a la izquierda.

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹ Este comportamiento está definido por la especificación Flexbox .

20
eeglbalazs 2014-09-25 00:42.

AFAIK, no hay propiedad para eso en las especificaciones, pero aquí hay un truco que he estado usando: establezca el elemento contenedor (el que tiene display:flex) en justify-content:space-around Luego agregue un elemento adicional entre el primer y segundo elemento y configúrelo en flex-grow:10(o algunos otro valor que funcione con su configuración)

Editar: si los elementos están estrechamente alineados, es una buena idea agregarlos flex-shrink: 10;al elemento adicional también, para que el diseño responda adecuadamente en dispositivos más pequeños.

13
borkxs 2016-02-05 06:38.

Si en realidad no está restringido a mantener todos estos elementos como nodos hermanos, puede envolver los que van juntos en otro cuadro flexible predeterminado y hacer que el contenedor de ambos use un espacio entre ellos.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

O si estaba haciendo lo mismo con flex-start y flex-end invertidos, simplemente cambie el orden del contenedor predeterminado-flex y el hijo solitario.

1
Mahks 2015-03-04 17:44.

Para aquellas situaciones en las que flex-endse conoce el ancho de los elementos que desea , puede establecer su flexión en "0 0 ## px" y establecer el elemento que desea flex-startconflex:1

Esto hará que el pseudo flex-startelemento llene el contenedor, simplemente formatee text-align:lefto lo que sea.

0
Micros 2016-11-02 00:00.

Resolví un caso similar estableciendo el estilo del elemento interno en margin: 0 auto.
Situación: Mi menú generalmente contiene tres botones, en cuyo caso deben serlo justify-content: space-between. Pero cuando solo hay un botón, ahora estará alineado al centro en lugar de a la izquierda.

0
De'Yonte W. 2020-08-10 08:23.

Para ampliar la respuesta de Pavlo https://stackoverflow.com/a/34063808/1069914 , puede tener varios elementos secundarios justify-content: flex-starten su comportamiento pero tener el último elementojustify-content: flex-end

.container {
  height: 100px;
  border: solid 10px skyblue;
  display: flex;
  justify-content: flex-end;
}

.container > *:not(:last-child) {
    margin-right: 0;
    margin-left: 0;
}

/* set the second to last-child */
.container > :nth-last-child(2) {
    margin-right: auto;
    margin-left: 0;
}

.block {
  width: 50px;
  background: tomato;
  border: 1px solid black;
}
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block" style="width:150px">I should be at the end of the flex container (i.e. justify-content: flex-end)</div>
</div>

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Related questions

MORE COOL STUFF

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que tiene 'envenenamiento por mercurio y plomo' probablemente por voltear 'casas asquerosas'

La estrella de HGTV, Christina Hall, revela que le diagnosticaron envenenamiento por mercurio y plomo, probablemente debido a su trabajo como manipuladora de casas.

2022-12-22.

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

La estrella de 'Love Is Blind' Brennon Lemieux responde a los cargos de violencia doméstica

Recientemente salió a la luz un informe policial que acusa a la estrella de 'Love Is Blind', Brennon, de violencia doméstica. Ahora, Brennon ha respondido a los reclamos.

2022-12-14.

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia Judd en un momento festivo de pánico

Conozca cómo Wynonna Judd se dio cuenta de que ahora es la matriarca de la familia mientras organizaba la primera celebración de Acción de Gracias desde que murió su madre, Naomi Judd.

2022-12-09.

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Experto en lenguaje corporal explica los 'paralelos' entre Kate Middleton y la princesa Diana

Descubra por qué un destacado experto en lenguaje corporal cree que es fácil trazar "tales paralelismos" entre la princesa Kate Middleton y la princesa Diana.

2022-12-07.

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los láseres arrojan luz sobre por qué necesita cerrar la tapa antes de descargar

Los inodoros arrojan columnas de aerosol invisibles con cada descarga. ¿Como sabemos? La prueba fue capturada por láseres de alta potencia.

2022-12-09.

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

2022-09-02.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

2022-07-29.

¿Caduca el repelente de insectos?

¿Caduca el repelente de insectos?

¿Sigue siendo efectivo ese lote de repelente de insectos que te quedó del verano pasado? Si es así, ¿por cuánto tiempo?

2022-06-08.

Mire a este policía escalar una situación sin otra razón que ser un idiota

Mire a este policía escalar una situación sin otra razón que ser un idiota

Captura de pantalla del video de Facebook Para aquellos de ustedes que pueden ser demasiado jóvenes para saber esto, antes de que Ice-T fuera una gran estrella en Ley y orden: Unidad de víctimas especiales, era uno de los mejores raperos gangsta de Los Ángeles de todos los tiempos. De hecho, estaba haciendo gangsta rap antes que N.

2023-03-23 18:52.

Reemplace 'Cargado racialmente' por 'Racista' con esta extensión de Chrome

Reemplace 'Cargado racialmente' por 'Racista' con esta extensión de Chrome

Imagen a través de WHAS 11 Algunas cosas realmente podrían tener "carga racial" sin ser racistas. Pero en los principales medios de comunicación, el primero suele ser un código para el segundo.

2023-03-23 18:51.

Proud Mary de Taraji P. Henson es una gran protagonista en busca de una buena película

Proud Mary de Taraji P. Henson es una gran protagonista en busca de una buena película

Foto: Sony Taraji P. Henson, experta tanto en reacciones cáusticas como en expresiones con los ojos húmedos de abrumador conflicto interno, es una actriz dinámica.

2023-03-23 18:48.

Gregg Popovich: LaMarcus Aldridge pidió ser intercambiado este verano, pero ahora estamos bien

Gregg Popovich: LaMarcus Aldridge pidió ser intercambiado este verano, pero ahora estamos bien

Foto: Ronald Martinez / Getty El grandote de los Spurs, LaMarcus Aldridge está teniendo quizás la temporada más eficiente de su carrera mientras reemplaza a Kawhi Leonard como el jugador principal de San Antonio. Mientras que los Warriors y los Rockets están en una carrera armamentista para ver quién puede disparar 100 triples en un juego primero, los Spurs están escondidos detrás de Houston.

2023-03-23 18:47.

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

Patinaje artístico de EE. UU. 'frustrado' por falta de decisión final en evento por equipos, pide una decisión justa

El equipo está a la espera de las medallas que ganó en los Juegos Olímpicos de Invierno de 2022 en Beijing, ya que se está resolviendo un caso de dopaje que involucra a la patinadora artística rusa Kamila Valieva.

2023-02-03.

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Los compradores de Amazon dicen que duermen 'como un bebé mimado' gracias a estas fundas de almohada de seda que cuestan tan solo $ 10

Miles de compradores de Amazon recomiendan la funda de almohada de seda Mulberry, y está a la venta en este momento. La funda de almohada de seda viene en varios colores y ayuda a mantener el cabello suave y la piel clara. Compre las fundas de almohada de seda mientras tienen hasta un 46 por ciento de descuento en Amazon

2023-02-03.

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

Se busca al corredor de los Bengals Joe Mixon por orden de arresto emitida por presuntamente apuntar con un arma de fuego a una mujer

El jueves se presentó una denuncia de delito menor amenazante agravado contra Joe Mixon.

2023-02-03.

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

Profesor de la Universidad de Purdue arrestado por presuntamente traficar metanfetamina y proponer favores sexuales a mujeres

El Departamento de Policía de Lafayette comenzó a investigar a un profesor de la Universidad de Purdue en diciembre después de recibir varias denuncias de un "hombre sospechoso que se acercaba a una mujer".

2023-02-03.

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Concept Drift: el mundo está cambiando demasiado rápido para la IA

Al igual que el mundo que nos rodea, el lenguaje siempre está cambiando. Mientras que en eras anteriores los cambios en el idioma ocurrían durante años o incluso décadas, ahora pueden ocurrir en cuestión de días o incluso horas.

India me está pateando el culo

India me está pateando el culo

Estoy de vuelta por primera vez en seis años. No puedo decirte cuánto tiempo he estado esperando esto.

ℝ

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

¿Merrick Garland le ha fallado a Estados Unidos?

Es más de la mitad de la presidencia de Biden. ¿Qué está esperando Merrick Garland?

¿Merrick Garland le ha fallado a Estados Unidos?

Creo, un poco tarde en la vida, en dar oportunidades a la gente. Generosamente.

Language

Japanese
Spanish
German
French
Thai
Portuguese
Russian
Vietnamese
Italian
Korean
Turkish
Indonesian
Polish
Hindi