Perché la distanza tra le colonne si riduce quando aumento la larghezza del contenitore?

Jan 06 2021

Non riesco a capire la logica alla base dello spazio tra le colonne in un layout a più colonne. Ho il seguente HTML / CSS in questo violino :

<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;
}

Noterai che se modifichi la dimensione widthdel contenitore da 300px a 400px, lo spazio tra le colonne si riduce effettivamente.

Perché lo fa? È possibile allineare a sinistra le colonne in modo che non si spostino? La distanza fissa tra le colonne CSS potrebbe suggerire che non è possibile.

Risposte

2 TemaniAfif Jan 06 2021 at 23:12

Il layout delle colonne è un po 'complicato. Se leggi la specifica relativa column-widthpuoi trovare:

descrive la larghezza ottimale della colonna. La larghezza effettiva della colonna può essere più ampia (per riempire lo spazio disponibile) o più stretta (solo se lo spazio disponibile è inferiore alla larghezza della colonna specificata). rif

Rimuovi la larghezza dagli elementi e ridimensiona il contenitore per notare questo:

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

Noterai che lo spazio è effettivamente fisso ma la larghezza delle colonne sta cambiando.

Puoi trovare maggiori dettagli sull'algoritmo qui: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm


Una soluzione è considerare l'uso di una griglia CSS con larghezza di colonna fissa. Il trucco è definire la larghezza della colonna della griglia in modo che sia uguale allo spazio + larghezza della colonna e far sì che il contenitore riempia tutte le colonne (la sua larghezza sarà un moltiplicatore dello spazio + larghezza della colonna )

Ridimensiona lo schermo per vedere il risultato:

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

3 AHaworth Jan 06 2021 at 23:03

Se non specifichi un conteggio delle colonne (il secondo parametro per le colonne), il sistema calcolerà il numero di colonne possibile (ovvero, utilizza auto come parametro del conteggio delle colonne).

Hai specificato una larghezza di colonna "ideale" di 120 px e gli elementi effettivi hanno una larghezza inferiore a quella. Pertanto il sistema calcola che puoi inserire 3 colonne nel contenitore di larghezza 400px e dispone le prime due di conseguenza.

Ecco alcune informazioni da https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

La proprietà CSS della larghezza della colonna imposta la larghezza della colonna ideale in un layout a più colonne. Il contenitore avrà tutte le colonne che possono adattarsi senza che nessuna di esse abbia una larghezza inferiore al valore della larghezza della colonna. Se la larghezza del contenitore è inferiore al valore specificato, la larghezza della singola colonna sarà inferiore alla larghezza della colonna dichiarata.

Se vuoi assicurarti che ci siano solo due colonne, dai il secondo parametro:

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>