Centre los artículos flexibles en la envoltura

5 minutos de lectura

Centre los articulos flexibles en la envoltura
Entonces por qué

Configuré un flexbox con dos elementos que deberían estar a la izquierda y a la derecha en una pantalla normal.

Si la pantalla no es lo suficientemente grande para mostrar ambos uno al lado del otro, debe ajustarse, pero luego deben estar centrados y no alineados a la izquierda.

Probé diferentes soluciones (como usar margin: auto en los elementos secundarios) pero que los alineaba más al centro incluso cuando estaban en la misma fila.

Aquí hay un ejemplo simplificado:

.container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.large {
  width: 500px;
}
.small {
  width: 175px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px 0px;
}
<div class="container large">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="container small">
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/SoWhy/zfx4ub8x/

El primer contenedor es el posicionamiento previsto, el segundo contenedor emula el mismo contenedor en una pantalla más pequeña, observe la alineación a la izquierda.

¿Hay alguna manera de definir que Flexbox alinee los elementos de manera diferente cuando se envuelven o solo puedo hacerlo usando el método “@media screen” (que requiere que establezca un tamaño determinado y, por lo tanto, no es flexible si el tamaño de los elementos cambios)?

  • No, flexbox no puede hacer eso… es una solicitud común.

    – Paulie_D

    10 de julio de 2016 a las 13:18

1647549012 301 Centre los articulos flexibles en la envoltura
miguel benjamin

Es posible que esto no funcione en su caso, pero vale la pena mencionar esta diferencia menos conocida entre justify-content: space-between y justify-content: space-around.

De la especificación de flexbox:

8.2. Alineación del eje: la justify-content propiedad

los justify-content La propiedad alinea los elementos flexibles a lo largo del eje principal de la línea actual del contenedor flexible.

Hay cinco valores que se aplican a justify-content. Aquí hay dos de ellos:

space-between

Los artículos flexibles se distribuyen uniformemente en la línea.

Si el espacio libre sobrante es negativo o solo hay un elemento flexible en la línea, este valor es idéntico a flex-start.

Esto explica por qué sus artículos se alinean a la izquierda en la envoltura con space-between.

ahora mira space-around:

space-around

Los artículos flexibles se distribuyen uniformemente en la línea, con espacios de la mitad del tamaño en cada extremo.

Si el espacio libre sobrante es negativo o solo hay un elemento flexible en la línea, este valor es idéntico a center.

Por lo tanto, para alinear al centro los artículos flexibles en la envoltura, considere usar space-around.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* ADJUSTMENT */
  border: 1px solid black;
}
.item {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin: 25px;
}
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>

Violín revisado

  • Pero al usar el espacio alrededor, los elementos tendrán “espacios de tamaño medio en cada extremo” (según la explicación que publicaste). No quiero esos espacios, quiero que los artículos estén lo más separados posible cuando no estén envueltos.

    – Entonces por qué

    10 de julio de 2016 a las 16:51

  • Los márgenes de 25 px fueron solo para que se vean mejor en el ejemplo. Perdón por la confusion. En la aplicación real, los márgenes serían “25px 0px”, es decir, sin margen a la izquierda o a la derecha

    – Entonces por qué

    10 de julio de 2016 a las 17:10

  • Si hay un truco que hace el trabajo, siempre estoy abierto a él. 😉

    – Entonces por qué

    10 de julio de 2016 a las 18:16

  • Si entiendo. El propósito de mi respuesta fue revelar la característica central de space-arounden caso de que te ayude a ti o a otros.

    – Michael Benjamín

    7 de enero de 2018 a las 19:27

Centre los articulos flexibles en la envoltura
Md. Monirul Alom

Nota: Tendrá que usar la consulta de medios para diferentes anchos.

No hay forma de detectar cuándo está envuelto usando css3.

Si desea centrar el elemento utilice display:inline-flex y justify-content: center; al contenedor y margin: 0 auto; a clase item

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 25px;
  margin: 0 auto;
}

Se envuelve cuando el tamaño del contenedor es inferior a 200 px.

Haga clic para ver un ejemplo alineado al centro en JsFiddle

Si desea mantener los artículos en una sola línea flex-wrap: nowrap – lo que obliga a que los elementos flexibles permanezcan en una sola línea.

Así que el estilo para .container será como el siguiente.

.container {
  display: flex;
  align-items: flex-end; 
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid black;
  margin-bottom: 25px;
}

Haga clic para ver los elementos obligados a permanecer en una sola línea en JsFiddle

  • No quiero que se queden en una sola línea. En dispositivos pequeños, los quiero envueltos, solo que alineados de manera diferente. Sus soluciones hacen que los artículos sean más pequeños.

    – Entonces por qué

    10 de julio de 2016 a las 11:43

  • @SoPor qué tendrá que usar la consulta de medios para diferentes anchos. Mi respuesta se actualiza comprobar ahora.

    – Md. Monirul Alom

    10 de julio de 2016 a las 12:42

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad