如何在 CSS 多列布局中使單列居中

Question

我有一個使用 CSS 多列布局的元素來顯示項目列表。

<div style="column-width: 300px; column-count: 3; text-align: center;">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>

示例列表正確顯示為三列，每列包含兩個項目，每個項目都在其列內居中。

但是，當我有一個僅包含一個項目的列表時，該項目將顯示在第一列中，而第二列和第三列的空間仍為空。

有沒有辦法使單列在父元素內居中？ 同樣，如果我只有兩個項目的列表，有沒有辦法讓兩個填充的列在父元素內居中？

本質上，我想要的是，如果有三個或更多項目，則顯示三列，但如果只有一兩個項目，則僅顯示顯示這些項目所需的列數，而不保留未使用的列空間。

編輯

問題是當我有一個只有一項的列表時，例如：

<div style="column-width: 300px; column-count: 3; text-align: center;">
    <div>Item 1</div>
</div>

單個項目在第一列，而第二列和第三列所在的空間仍然保留，即使那里沒有內容。

Answer 1

我創建了一個小提琴： https : //jsfiddle.net/Lvtya3qL/

<div class="parent">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
    <div class="child">Item 5</div>
    <div class="child">Item 6</div>
    <div class="child">Item 7</div>
</div>

.parent{
  display:flex;
  width: 300px;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  width: 100px;
}

Answer 2

我不打算回答這個問題，因為我面臨的問題是不同的。 但是后來我注意到這里唯一的答案是扔掉了columns並切換到flexbox ，這做了完全不同的事情，使問題沒有得到解答。

我做了一個你可以在下面找到的實現。 我還添加了第四列，以便更清楚我在 CSS 的:nth-child(n):nth-last-child(n)部分所做的事情。

您可以看到有 3 個奇數選擇器，它們都在左側添加了一個inset ，以便所有子項都居中。 您可以繼續將這些選擇器添加到您想要的更多列中。 您需要的選擇器數量是列數 - 1。

要進行3列時，可以刪除最后一個奇數的選擇器。
如上所述，我已經添加了第四列，以便您可以看到需要應用的選擇器模式才能使其工作。

 .parent { --columns: 4; --gap: 1em; column-count: var(--columns); column-gap: var(--gap); } .child { position: relative; break-inside: avoid; break-inside: avoid-column; } .child:only-child { left: calc((100% + var(--gap)) * (var(--columns) - 1) / 2); } .child:nth-child(1):nth-last-child(2), .child:nth-child(2):nth-last-child(1) { left: calc((100% + var(--gap)) * (var(--columns) - 2) / 2); } .child:nth-child(1):nth-last-child(3), .child:nth-child(2):nth-last-child(2), .child:nth-child(3):nth-last-child(1) { left: calc((100% + var(--gap)) * (var(--columns) - 3) / 2); } /* Prettifications only */ body { margin: 0; font-family: sans-serif; } .parent { margin: var(--gap); text-align: center; } .child { padding: 8px 0; background-color: rgba(127,127,127,.1); outline: 1px solid black; outline-offset: -1px; }

 <div class="parent"> <div class="child">1</div> </div> <div class="parent"> <div class="child">1</div> <div class="child">2</div> </div> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> </div>

但是，這有一個很大的缺點。 它本身不再響應！

我已經刪除了column-width ，這可能會使這個實現對您的情況毫無用處，因為column-width屬性以前全權負責使整個響應。 但是，如果您可以手動添加斷點，那么我認為這是實現居中多列布局的唯一方法之一。

最好按如下方式添加斷點：

@media all and (min-width: 500px) {
  .parent { --columns: 2 }

  .child:only-child {
    left: calc((100% + var(--gap)) * (var(--columns) - 1) / 2);
  }
}

@media all and (min-width: 600px) {
  .parent { --columns: 3 }

  .child:nth-child(1):nth-last-child(2),
  .child:nth-child(2):nth-last-child(1) {
    left: calc((100% + var(--gap)) * (var(--columns) - 2) / 2);
  }
}

@media all and (min-width: 700px) {
  .parent { --columns: 4 }

  .child:nth-child(1):nth-last-child(3),
  .child:nth-child(2):nth-last-child(2),
  .child:nth-child(3):nth-last-child(1) {
    left: calc((100% + var(--gap)) * (var(--columns) - 3) / 2);
  }
}

這樣，樣式僅在需要時應用。 另外：請記住按此順序保留媒體查詢。 媒體查詢越高， --columns變量必須越高。