컨테이너 너비를 늘릴 때 컬럼 간격이 작아지는 이유는 무엇입니까?

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컨테이너를 300px에서 400px로 변경하면 실제로 열 사이의 간격이 줄어 듭니다.

왜 이렇게하나요? 열이 움직이지 않도록 열을 왼쪽 정렬 할 수 있습니까? 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

column-count (열에 대한 두 번째 매개 변수)를 지정하지 않으면 시스템이 가능한 열 수를 계산합니다 (즉, column-count 매개 변수로 auto를 사용함).

120px의 '이상적인'열 너비를 지정했으며 실제 항목의 너비는 이보다 작습니다. 따라서 시스템은 너비가 400px 인 컨테이너에 3 개의 열을 가져올 수 있다고 판단하고 그에 따라 처음 두 개를 배치합니다.

다음은 몇 가지 정보입니다. 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>