Dlaczego odstęp między kolumnami zmniejsza się, gdy zwiększam szerokość kontenera?
Trudno mi zrozumieć logikę stojącą za odstępem między kolumnami w układzie wielokolumnowym. Mam następujący kod HTML / CSS w tym skrzypcach :
<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;
}
Zauważysz, że jeśli zmienisz rozmiar width
kontenera z 300 pikseli na 400 pikseli, szczelina między kolumnami faktycznie się zmniejszy.

Dlaczego to robi? Czy można wyrównać kolumny do lewej, aby się nie poruszały? Naprawiona luka między kolumnami CSS może sugerować, że nie jest to możliwe.
Odpowiedzi
Układ kolumn jest nieco skomplikowany. Jeśli zapoznasz się ze specyfikacją związaną z column-width
Tobą, znajdziesz:
opisuje optymalną szerokość kolumny. Rzeczywista szerokość kolumny może być szersza (aby wypełnić dostępne miejsce) lub węższa (tylko wtedy, gdy dostępne miejsce jest mniejsze niż określona szerokość kolumny). ref
Usuń szerokość z elementów i zmień rozmiar kontenera, aby zauważyć:
.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>
Zauważysz, że luka jest rzeczywiście naprawiona, ale szerokość kolumn się zmienia.
Więcej informacji na temat algorytmu można znaleźć tutaj: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm
Rozwiązaniem jest rozważenie zastosowania siatki CSS o stałej szerokości kolumn. Sztuczka polega na tym, aby zdefiniować szerokość kolumny siatki tak, aby była równa przerwie + szerokości kolumny i sprawić, że kontener wypełni wszystkie kolumny (jego szerokość będzie mnożnikiem odstępu + szerokości kolumny )
Zmień rozmiar ekranu, aby zobaczyć wynik:
.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>
Jeśli nie określisz liczby kolumn (drugi parametr do kolumn), system obliczy możliwą liczbę kolumn (tj. Przyjmie wartość auto jako parametr liczby kolumn).
Określono „idealną” szerokość kolumny wynoszącą 120 pikseli, a rzeczywiste elementy mają mniejszą szerokość. Dlatego system zakłada, że można włożyć do kontenera o szerokości 400 pikseli 3 kolumny i odpowiednio układa pierwsze dwie.
Oto kilka informacji z https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
Właściwość CSS dla szerokości kolumny ustawia idealną szerokość kolumny w układzie wielokolumnowym. Kontener będzie miał tyle kolumn, ile się zmieści, a żadna z nich nie będzie miała szerokości mniejszej niż wartość szerokości kolumny. Jeśli szerokość kontenera jest węższa niż określona wartość, szerokość pojedynczej kolumny będzie mniejsza niż zadeklarowana szerokość kolumny.
Jeśli chcesz się upewnić, że są tylko dwie kolumny, podaj drugi parametr:
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>