Estoy tratando de mostrar una lista de elementos flexibles con ancho fijo en el centro de flexbox con envoltura usando margin: auto. Cuando se envuelve, el artículo envuelto también se centra en su propio contenedor:

enter image description here

¿Hay alguna forma de mantener el artículo envuelto a la izquierda mientras todo lo demás está centrado?

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
}

.children {
  flex: 1;
  border: 1px solid black;
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  height: 100px;
  margin-top: 1rem;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>
4
Leo Ruan 26 sep. 2019 a las 04:26

1 respuesta

La mejor respuesta

Está diciendo que quiere los elementos centrados, pero cuando solo hay un elemento que se ajusta, lo desea alineado a la izquierda.

El problema es que realmente no hay alineación a la izquierda en el contenedor flexible. Todo está centrado, según el espacio disponible en la fila. Entonces, el elemento individual en la última fila no tiene un concepto de lo que está sucediendo arriba, y nada con lo que alinearse.

Esto es lo que sucede si alinea a la izquierda el último elemento (en pantallas más amplias):

enter image description here

.parent {
  display: flex;
  flex-wrap: wrap;
}

.children {
  border: 1px solid black;
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  height: 100px;
  margin-top: 1rem;
}

.children:last-child {
  margin-left: 0;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

Lo que necesita es una estructura de cuadrícula anidada.

Una rejilla de nivel superior para establecer el centrado.

Una rejilla anidada para la envoltura.

En la siguiente demostración, encontrará una cuadrícula de tres columnas. Las columnas izquierda y derecha son elementos vacíos (espaciadores), creados con pseudoelementos CSS y configurados con anchos iguales. Esto centra el elemento del medio.

El elemento del medio también es un contenedor de rejilla. Usando las funciones repeat() y auto-fill, los elementos se pueden envolver, con elementos individuales alineados a la izquierda.

body {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

body::before,
body::after {
  content: ''; /* in grid (and flex) layouts, pseudo-elements on the container
                  are treated as items */
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 100px;
  grid-gap: 10px;
  justify-content: center; /* centers the columns (not the items, like in flex) */
}

.children {
  border: 1px solid black;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

jsFiddle demo

4
Michael Benjamin 26 sep. 2019 a las 02:40