Flexbox: 4 artículos por fila
Estoy usando un cuadro flexible para mostrar 8 elementos que cambiarán de tamaño dinámicamente con mi página. ¿Cómo lo fuerzo a dividir los elementos en dos filas? (4 por fila)?
Aquí hay un recorte relevante:
(O si prefiere jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/ )
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
Tienes flex-wrap: wrapel contenedor. Eso es bueno, porque anula el valor predeterminado, que es nowrap( fuente ). Esta es la razón por la que los elementos no se ajustan para formar una cuadrícula en algunos casos .
En este caso, el principal problema está flex-grow: 1en los elementos flexibles.
La flex-growpropiedad en realidad no mide el tamaño de los elementos flexibles. Su tarea es distribuir el espacio libre en el contenedor ( fuente ). Entonces, no importa cuán pequeño sea el tamaño de la pantalla, cada elemento recibirá una parte proporcional del espacio libre en la línea.
Más específicamente, hay ocho elementos flexibles en su contenedor. Con flex-grow: 1, cada uno recibe 1/8 del espacio libre en la línea. Dado que sus elementos no tienen contenido, pueden reducirse a cero de ancho y nunca se ajustarán.
La solución es definir un ancho en los artículos. Prueba esto:
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>Con flex-grow: 1la definición flexabreviada, no es necesario que flex-basissea del 25%, lo que en realidad daría como resultado tres elementos por fila debido a los márgenes.
Dado que flex-growconsumirá espacio libre en la fila, flex-basissolo debe ser lo suficientemente grande para imponer un ajuste. En este caso, con flex-basis: 21%, hay mucho espacio para los márgenes, pero nunca suficiente para un quinto elemento.
Añade un ancho a los .childelementos. Yo personalmente usaría porcentajes si margin-leftquieres tener siempre 4 por fila.
MANIFESTACIÓN
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 2%;
flex-grow: 1;
height: 100px;
width: calc(100% * (1/4) - 10px - 1px);
}
Aquí hay otro enfoque.
También puedes lograrlo de esta manera:
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: 25%;
box-sizing: border-box;
}
Muestra: https://codepen.io/capynet/pen/WOPBBm
Y una muestra más completa: https://codepen.io/capynet/pen/JyYaba
Lo haría así usando márgenes negativos y cálculos para los medianiles:
.parent {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
}
.child {
width: calc(25% - 10px);
margin-left: 10px;
margin-top: 10px;
}
Demostración: https://jsfiddle.net/9j2rvom4/
Método alternativo de cuadrícula CSS:
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
Demostración: https://jsfiddle.net/jc2utfs3/
Para más detalle puedes seguir este Link
.parent{
display: flex;
flex-wrap: wrap;
}
.parent .child{
flex: 1 1 25%;
/*Start Run Code Snippet output CSS*/
padding: 5px;
box-sizing: border-box;
text-align: center;
border: 1px solid #000;
/*End Run Code Snippet output CSS*/
}<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>