¿Por qué el espacio de mi columna se vuelve más pequeño cuando aumento el ancho de mi contenedor?

Question

Me cuesta entender la lógica detrás del espacio entre columnas en un diseño de varias columnas. Tengo el siguiente HTML / CSS en este violín :

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

.flex-container {
  height: 500px;
  width: 300px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

Notarás que si cambias el widthdel contenedor de 300px a 400px, el espacio entre las columnas realmente se reduce.

¿Por qué está haciendo esto? ¿Es posible alinear las columnas a la izquierda para que no se muevan? El espacio fijo entre las columnas CSS puede sugerir que eso no es posible.

Answer 1

El diseño de la columna es un poco complicado. Si lee la especificación relacionada column-width, puede encontrar:

describe el ancho de columna óptimo. El ancho real de la columna puede ser más ancho (para llenar el espacio disponible) o más estrecho (solo si el espacio disponible es menor que el ancho de columna especificado). ^árbitro

Elimine el ancho de los elementos y cambie el tamaño del contenedor para notar esto:

.flex-container {
  width: 400px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
  overflow:hidden;
  resize:horizontal;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

Notará que el espacio es fijo, pero el ancho de las columnas está cambiando.

Puede encontrar más detalles sobre el algoritmo aquí: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm

---

Una solución es considerar el uso de una cuadrícula CSS con un ancho de columna fijo. El truco es definir el ancho de la columna de la cuadrícula para que sea igual al espacio + ancho de la columna y haces que tu contenedor llene todas las columnas (su ancho será un multiplicador del espacio + ancho de la columna )

Cambie el tamaño de la pantalla para ver el resultado:

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,140px); /* 120 + 20 */
  overflow: hidden;
  resize: horizontal;
  border: 1px solid blue;

}

.flex-container {
  grid-column:1/-1;
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
  </div>
</div>

Answer 2

Si no especifica un recuento de columnas (el segundo parámetro de las columnas), el sistema calculará el número de columnas posibles (es decir, toma auto como el parámetro de recuento de columnas).

Ha especificado un ancho de columna 'ideal' de 120px y los elementos reales tienen un ancho menor que eso. Por lo tanto, el sistema calcula que puede colocar 3 columnas en el contenedor de 400 px de ancho y distribuye las dos primeras en consecuencia.

Aquí hay información de https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

La propiedad CSS de ancho de columna establece el ancho de columna ideal en un diseño de varias columnas. El contenedor tendrá tantas columnas como pueda caber sin que ninguna de ellas tenga un ancho menor que el valor de ancho de columna. Si el ancho del contenedor es más estrecho que el valor especificado, el ancho de la columna única será menor que el ancho de columna declarado.

Si desea asegurarse de que solo haya dos columnas, proporcione el segundo parámetro:

columns: 120px 2;

.flex-container {
  height: 500px;
  width: 400px;
  border: 1px solid blue;
  columns: 120px 2;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>