Warum wird mein Spaltenabstand kleiner, wenn ich die Breite meines Containers vergrößere?

Jan 06 2021

Es fällt mir schwer, die Logik hinter der Spaltenlücke in einem mehrspaltigen Layout zu verstehen. Ich habe das folgende HTML / CSS in dieser Geige :

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

Sie werden feststellen, dass widthdie Lücke zwischen den Spalten tatsächlich kleiner wird, wenn Sie den Container von 300px auf 400px ändern .

Warum macht es das? Ist es möglich, die Spalten nach links auszurichten, damit sie sich nicht bewegen? Eine feste Lücke zwischen CSS-Spalten kann darauf hindeuten, dass dies nicht möglich ist.

Antworten

2 TemaniAfif Jan 06 2021 at 23:12

Das Spaltenlayout ist etwas knifflig. Wenn Sie die zugehörige Spezifikation lesen, column-widthfinden Sie:

beschreibt die optimale Spaltenbreite. Die tatsächliche Spaltenbreite kann breiter (um den verfügbaren Platz auszufüllen) oder schmaler (nur wenn der verfügbare Platz kleiner als die angegebene Spaltenbreite ist) sein. ref

Entfernen Sie die Breite von den Elementen und ändern Sie die Größe des Containers, um Folgendes zu bemerken:

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

Sie werden feststellen, dass die Lücke zwar fest ist, sich jedoch die Breite der Spalten ändert.

Weitere Details zum Algorithmus finden Sie hier: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm


Eine Lösung besteht darin, die Verwendung eines CSS-Rasters mit fester Spaltenbreite in Betracht zu ziehen. Der Trick besteht darin, die Breite der Rasterspalte so zu definieren, dass sie der Lücke + Breite der Spalte entspricht, und Sie lassen Ihren Container alle Spalten füllen (seine Breite ist ein Multiplikator aus Lücke + Breite der Spalte ).

Ändern Sie die Größe des Bildschirms, um das Ergebnis anzuzeigen:

.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

Wenn Sie keine Spaltenanzahl angeben (der zweite Parameter zu den Spalten), berechnet das System die Anzahl der möglichen Spalten (dh es wird automatisch als Parameter für die Spaltenanzahl verwendet).

Sie haben eine "ideale" Spaltenbreite von 120 Pixel angegeben, und die tatsächlichen Elemente haben eine geringere Breite. Daher geht das System davon aus, dass Sie 3 Spalten in den Container mit einer Breite von 400 Pixel aufnehmen können, und legt die ersten beiden entsprechend an.

Hier sind einige Infos von https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

Die CSS-Eigenschaft für die Spaltenbreite legt die ideale Spaltenbreite in einem mehrspaltigen Layout fest. Der Container hat so viele Spalten, wie passen, ohne dass eine von ihnen eine Breite hat, die kleiner als der Wert für die Spaltenbreite ist. Wenn die Breite des Containers schmaler als der angegebene Wert ist, ist die Breite der einzelnen Spalte kleiner als die deklarierte Spaltenbreite.

Wenn Sie sicherstellen möchten, dass nur zwei Spalten vorhanden sind, geben Sie den zweiten Parameter an:

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>