Konteynırımın genişliğini arttırdığımda sütun boşluğum neden küçülüyor?

Jan 06 2021

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

widthKapsayı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

2 TemaniAfif Jan 06 2021 at 23:12

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>

3 AHaworth Jan 06 2021 at 23:03

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>