Konteynırımın genişliğini arttırdığımda sütun boşluğum neden küçülüyor?
Çok sütunlu bir düzende sütun boşluğunun arkasındaki mantığı anlamakta zorlanıyorum. Bu Keman'da aşağıdaki HTML / CSS'ye sahibim :
<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;
}
width
Kapsayıcıyı 300 pikselden 400 piksele değiştirirseniz, sütunlar arasındaki boşluğun gerçekte küçüldüğünü fark edeceksiniz .

Bunu neden yapıyor? Sütunları sola hizalamak mümkün mü, böylece hareket etmesinler? CSS sütunları arasındaki sabit boşluk , bunun mümkün olmadığını gösterebilir.
Yanıtlar
Sütun düzeni biraz karmaşıktır. İlgili özellikleri okursanız column-width
şunları bulabilirsiniz:
optimum sütun genişliğini açıklar. Gerçek sütun genişliği daha geniş (kullanılabilir alanı doldurmak için) veya daha dar olabilir (yalnızca kullanılabilir alan belirtilen sütun genişliğinden daha küçükse). ref
Öğelerin genişliğini kaldırın ve şunu fark etmek için kabı yeniden boyutlandırın:
.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>
Boşluğun gerçekten sabit olduğunu ancak sütunların genişliğinin değiştiğini fark edeceksiniz.
Algoritma hakkında daha fazla bilgiyi burada bulabilirsiniz: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm
Bir çözüm, sabit sütun genişliğine sahip CSS ızgarasının kullanılmasıdır. İşin püf noktası, ızgara sütununun genişliğini sütunun boşluğu + genişliğine eşit olacak şekilde tanımlamaktır ve tüm sütunları kabın doldurmasını sağlarsınız (genişliği, boşluk + sütun genişliğinin bir çarpanı olacaktır )
Sonucu görmek için ekranı yeniden boyutlandırın:
.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>
Bir sütun sayısı belirtmezseniz (sütunların ikinci parametresi), sistem olası sütun sayısını hesaplayacaktır (yani, sütun sayısı parametresi olarak auto alır).
120 piksellik bir 'ideal' sütun genişliği belirlediniz ve gerçek öğelerin genişliği bundan daha az. Bu nedenle sistem, 400px genişliğindeki konteynere 3 sütun alabileceğinizi ve ilk ikisini buna göre düzenleyebileceğinizi varsayar.
İşte bazı bilgiler https://developer.mozilla.org/en-US/docs/Web/CSS/column-width
Sütun genişliği CSS özelliği, çok sütunlu bir düzende ideal sütun genişliğini ayarlar. Kapta, hiçbiri sütun genişliği değerinden daha küçük bir genişliğe sahip olmadan sığabilecek kadar çok sütun olacaktır. Kabın genişliği belirtilen değerden daha dar ise, tek sütunun genişliği bildirilen sütun genişliğinden daha küçük olacaktır.
Yalnızca iki sütun olduğundan emin olmak istiyorsanız, ikinci parametreyi verin:
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>