Tengo algo como esto:
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
width: 25%;
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
No puedo entender como:
.row
calcula el ancho del elemento.col
calcula el ancho de los elementosLo que quiero es un sistema de cuadrícula que obtenga su tamaño en relación con el niño más grande, de modo que cada contenido quepa en su .col
celda.
Vi que podía hacer eso con display: grid
y grid-template-columns: 1fr 1fr 1fr 1fr
, pero entonces, ¿cómo lo hace receptivo y qué tan bien está respaldado?
Para responder a sus 3 primeras preguntas, simplemente debe eliminar el width:25%
para tener lo siguiente:
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
No definimos ningún ancho, por lo que cada uno col
se ajustará a su contenido y la fila tendrá el ancho igual a la suma de todos los col
.
Ahora que tenemos el ancho de la fila definido en función del contenido, no cambiará y se usará como referencia para el porcentaje. Usar 25%
for the col significa que cada uno obtendrá 25%
el ancho previamente definido y lógicamente tendremos un desbordamiento ya que el contenido dentro de cada uno col
no es el mismo.
.wrapper {
display: flex;
width: 300px;
}
.content {
flex: auto;
}
.row {
display: flex;
flex-flow: row wrap;
}
.col {
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
.width .col {
width:25%;
}
<div class='wrapper'>
<div class='content'>before width</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
<div class='wrapper'>
<div class='content'>after width</div>
<div class='row width'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
Para obtener lo que desea, creo que la 1fr
cuadrícula de CSS es el camino a seguir (como ya notó). En realidad, la cuadrícula CSS está bien soportada. Simplemente tendrá problemas con IE y puede seguir este enlace para ver los errores conocidos: https://caniuse.com/#feat=css-grid
Para que responda, puede considerar la consulta de medios para cambiar a un diseño de columna en pantallas pequeñas:
.wrapper {
display: flex;
width: 300px;
}
.row {
display: grid;
grid-auto-columns:1fr;
grid-auto-flow:column;
}
.col {
padding: 5px;
border: 1px solid black;
box-sizing: border-box;
}
@media all and (max-width:500px) {
.row {
grid-auto-flow:row;
}
}
<div class='wrapper'>
<div class='content'>Content</div>
<div class='row'>
<div class='col'>aa</div>
<div class='col'>aaaa</div>
<div class='col'>aaaaaa</div>
<div class='col'>aaaaaaaa</div>
</div>
</div>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras