¿Cómo hacer que el ancho de la cuadrícula flexible se relacione con el ancho del niño más grande?

Strebler

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:

  • Se .rowcalcula el ancho del elemento
  • Se .colcalcula el ancho de los elementos
  • Por qué algunos contenidos desbordan la caja y otros no

Lo 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 .colcelda.

Vi que podía hacer eso con display: gridy grid-template-columns: 1fr 1fr 1fr 1fr, pero entonces, ¿cómo lo hace receptivo y qué tan bien está respaldado?

Acompañar Afif

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 colse 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 colno 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 1frcuadrí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

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

TOP Lista

CalienteEtiquetas

Archivo