css - 用于包装元素并具有动态宽度的固定高度容器的 Flexbox

Question

我有一个用例，感觉像 flexbox CSS 应该能够处理，但我无法让它正常工作。我不确定这个用例是否超出了 flexbox 可以处理的范围，所以我正在寻求建议。 (我编写的 JavaScript 可以满足我的需要，但我正在查看它以查看纯 CSS 实现是否可行。)

我有一个包含 1 个或多个元素的容器 div。每个包含的元素都有固定的宽度和高度。容器 div 具有固定的高度，但宽度应与其包含其元素的宽度相同。这些元素应该在 div 中从上到下排列，并且当它们“填满”前一列时应该换行到一个新列。

这是我用来测试的一些示例 HTML:

<div class="my-container">
    <div class="my-item">Item 1</div>
    <div class="my-item">Item 2</div>
    <div class="my-item">Item 3</div>
    <div class="my-item">Item 4</div>
    <div class="my-item">Item 5</div>
    <div class="my-item">Item 6</div>
    <div class="my-item">Item 7</div>
    <div class="my-item">Item 8</div>
    <div class="my-item">Item 9</div>
    <div class="my-item">Item 10</div>
    <div class="my-item">Item 11</div>
    <div class="my-item">Item 12</div>
    <div class="my-item">Item 13</div>
    <div class="my-item">Item 14</div>
    <div class="my-item">Item 15</div>
    <div class="my-item">Item 16</div>
    <div class="my-item">Item 17</div>
    <div class="my-item">Item 18</div>
    <div class="my-item">Item 19</div>
    <div class="my-item">Item 20</div>
    <div class="my-item">Item 21</div>
    <div class="my-item">Item 22</div>
    <div class="my-item">Item 23</div>
    <div class="my-item">Item 24</div>
    <div class="my-item">Item 25</div>
</div>

这是我用来测试的 CSS:

    .my-container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        background-color: rgb(33, 150, 243);
        padding: 15px;
        height: 600px;
    }

    .my-item {
        width: 250px;
        height: 25px;
        color: white;
        padding: 10px;
        flex: 0 0 auto;
    }

请注意，此处的宽度和高度值是任意的，可以更改。但元素将始终具有固定的宽度/高度，容器将始终具有固定的高度。

使用上面的 CSS，元素会正确地换行到一个新列，但是容器 div 会填满视口(viewport)的整个宽度。我只需要容器 div 的宽度足以包含其元素。

如果我将 my-container 的显示属性从“flex”更改为“inline-flex”，容器宽度会缩小，但宽度不足以显示第一列以外的内容，后续列不会完全可见.

这可能是那些 catch 22 情况之一。这些元素具有固定大小，但需要根据容器的高度流入列中。并且容器需要从其元素流入的列数中获取其宽度。

我还研究了 CSS 网格，看看是否可行，但听起来您必须提前知道列数才能工作，但我不知道。列数取决于元素的大小和容器的高度。

flexbox CSS 能解决这个问题吗？如果没有，还有其他基于 CSS 的方法吗？我已经有了执行此操作的 JavaScript 实现，如果可行的话，我更愿意使用纯 CSS 实现。

Answer 1

您可以使用网格的自动填充属性，因此您不需要知道列数。

  .my-container {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, minmax(45px, 1fr));
    background-color: rgb(33, 150, 243);
    padding: 15px;
    height: 600px;
    width: fit-content;
}

.my-item {
    width: 250px;
    height: 25px;
    color: white;
    padding: 10px;
    flex: 0 0 auto;
}

JSFiddle 演示:https://jsfiddle.net/92sak0zc/6/