html - container - Orientación de elementos flexibles en la última fila o en una fila específica

flexbox grid

Question

Mi problema es que quiero el flexbox con ancho de rango variable, y todo funciona bien, pero no en la última fila. Quiero la misma dimensión para todos los niños, incluso cuando la fila no está llena de niños (la última fila).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

Creé una situación dinámica en jsFiddle

Mis divs flexibles pueden reducirse hasta 150 px y crecer hasta 250 px, pero todos deben tener el mismo tamaño (y obviamente quiero una solución CSS, con JS sé el camino).

Answer 1

Como una solución rápida y sucia, se puede usar:

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/
}

Answer 2

Desafortunadamente, en la iteración actual de flexbox (Nivel 1), no hay una forma limpia de resolver el problema de alineación de la última fila. Es un problema comun.

Sería útil tener una propiedad flex a lo largo de las líneas de:

• last-row
• last-column
• only-child-in-a-row
• alone-in-a-column

Este problema parece ser de alta prioridad para Flexbox Nivel 2:

• CSS Working Group Wiki - Problemas de especificación y planificación
• https://lists.w3.org/Archives/Public/www-style/2015Jan/0150.html

Aunque este comportamiento es difícil de lograr en flexbox, es simple y fácil en CSS Grid Layout :

• Elementos flexibles de igual ancho incluso después de envolver

En caso de que Grid no sea una opción, aquí hay una lista de preguntas similares que contienen varios hacks de flexbox:

• Dimensionar y alinear correctamente los elementos flexibles en la última fila
• Cuadro flexible: alinee la última fila con la cuadrícula
• Flexbox wrap - alineación diferente para la última fila
• ¿Cómo puede un elemento flexible mantener las mismas dimensiones cuando se fuerza a una nueva fila?
• ¿Selector para un elemento solo en una fila?
• Alinear elementos en la última fila de flexbox
• ¿Cómo puedo permitir que crezcan los artículos flexibles manteniendo el mismo tamaño?
• Alinear a la izquierda la última fila de flexbox usando espacios intermedios y márgenes
• Margen inconsistente entre elementos flexibles en la última fila
• ¿Cómo mantener los elementos flexibles envueltos del mismo ancho que los elementos de la fila anterior?
• Cómo alinear la última fila / línea izquierda en la caja flexible de varias líneas
• Los últimos hijos de la cuadrícula obtienen una canaleta gigante debido al espacio entre cajas flexibles
• Gestión de justify-content: espacio intermedio en la última fila
• Espacio Flexbox entre comportamiento combinado con wrap
• ¿Es posible usar CSS Flexbox para estirar elementos en cada fila mientras se mantienen anchos consistentes?

Answer 3

Utilicé esta solución, incluso si no es muy elegante y no usa el poder de Flexbox.

Se puede realizar en las siguientes condiciones:

• Todos los artículos tienen el mismo ancho.
• Los artículos tienen un ancho fijo
• Utiliza SCSS / SASS (aunque se puede evitar)

Si este es el caso, puede usar el siguiente fragmento:

 $itemWidth: 400px;
 $itemMargin: 10px;

html, body {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  border: solid 1px blue;
}

@for $i from 1 through 10 {
  @media only screen and (min-width: $i * $itemWidth + 2 * $i * $itemMargin) {
    .flex-container {
      width: $i * $itemWidth + 2 * $i * $itemMargin;
    }
  }
}

.item {
  flex: 0 0 $itemWidth;
  height: 100px;
  margin: $itemMargin;
  background: red;
}

<div class="flex-container">
  <div class="item"></div>
  <div class="item" style="flex: 500 0 200px"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Here he creado un ejemplo en codepen que también implementa margen.

La segunda y la tercera condiciones se pueden evitar, respectivamente, utilizando variables css (si decidió proporcionarle soporte) y compilando el fragmento de scss anterior.

Bueno, es cierto, podríamos hacerlo también antes de flexbox, pero display: flex puede seguir siendo esencial para un diseño receptivo.