Centre los artículos flexibles en la envoltura

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)?

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

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