Question

我有一个用例，像flexbox CSS这样的感觉应该能够处理，但是我无法使其正常工作。我不确定该用例是否超出了Flexbox的处理能力，所以我正在寻求建议。（我编写的JavaScript可以满足我的需要，但是我正在研究这样做是否纯粹的CSS实现是可行的。）

我有一个容器div，其中将包含1个或多个项目。每个包含的项目都有固定的宽度和高度。容器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会填充视口的整个宽度。我需要容器div仅足够宽以容纳其项目。

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

这可能是22种情况之一。这些项目具有固定的大小，但需要根据容器的高度流入列中。而且容器需要从其物品流入的列数中得出宽度。

我还研究了CSS网格，看是否有可能，但是听起来您必须事先知道要使之起作用的列数，而我不知道。列数取决于项目的大小和容器的高度。

flexbox CSS可以解决此问题吗？如果没有，还有其他基于CSS的方法吗？我已经有一个执行此操作的JavaScript实现，如果可行，我只希望有一个纯CSS实现。

Answer 1

您可以使用grid的autofill属性，因此您无需知道列数。

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

用于固定高度容器的Flexbox，用于包裹物品并具有动态宽度

1 个答案: