Почему зазор между столбцами становится меньше, когда я увеличиваю ширину контейнера?

Question

Мне трудно понять логику зазора между столбцами в многоколоночном макете. У меня в этой скрипке есть следующий HTML / CSS :

<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размер контейнера с 300 пикселей на 400 пикселей, промежуток между столбцами фактически сократится.

Почему он это делает? Можно ли выровнять столбцы по левому краю, чтобы они не двигались? Фиксированный промежуток между столбцами CSS может указывать на то, что это невозможно.

Answer 1

Расположение столбцов немного сложно. Если вы прочитали относящуюся к нему спецификацию, column-widthвы можете найти:

описывает оптимальную ширину столбца. Фактическая ширина столбца может быть шире (чтобы заполнить доступное пространство) или уже (только если доступное пространство меньше указанной ширины столбца). ^ссылка

Удалите ширину элементов и измените размер контейнера, чтобы заметить это:

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

Вы заметите, что зазор действительно исправлен, но ширина столбцов меняется.

Вы можете найти более подробную информацию об алгоритме здесь: https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm

---

Решением является использование сетки CSS с фиксированной шириной столбца. Хитрость заключается в том, чтобы определить ширину столбца сетки, равную зазору + ширине столбца, и вы заставите контейнер заполнить все столбцы (его ширина будет множителем зазора + ширины столбца )

Измените размер экрана, чтобы увидеть результат:

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

Answer 2

Если вы не укажете счетчик столбцов (второй параметр столбцов), то система определит возможное количество столбцов (т. Е. В качестве параметра счетчика столбцов будет выбрано значение auto).

Вы указали «идеальную» ширину столбца 120 пикселей, а фактические элементы имеют меньшую ширину. Поэтому система считает, что вы можете поместить 3 столбца в контейнер шириной 400 пикселей, и соответственно размещает первые два.

Вот некоторая информация из https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

Свойство CSS column-width устанавливает идеальную ширину столбца в многоколоночном макете. В контейнере будет столько столбцов, сколько может поместиться, при этом ширина ни одного из них не будет меньше значения ширины столбца. Если ширина контейнера меньше указанного значения, ширина отдельного столбца будет меньше, чем заявленная ширина столбца.

Если вы хотите убедиться, что есть только два столбца, укажите второй параметр:

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>