如何使用css将行切换到列[重复]答案

【问题标题】：How to switch rows into columns using css [duplicate]如何使用css将行切换到列[重复]
【发布时间】：2021-11-05 20:55:16
【问题描述】：

您好，我想使用 css 将行更改为列。这是我的实际代码的样子：

<style>
    .flex-container {
        max-width: 500px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .flex-item {
        width: 25%;

    }

</style>
<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 class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
    <div class="flex-item">16</div>
    <div class="flex-item">17</div>
    <div class="flex-item">18</div>
    <div class="flex-item">19</div>
</div>

在浏览器中我有这个：第一步

我需要：最后一步

【问题讨论】：

标签： html css

【解决方案1】：

使用 Flex-direction 将 flex 的方向从 row 更改为 column 。默认情况下 flex 的方向是 ROW 。通过使用 flex-direction:col 我们可以从行切换到列。

flex-direction:column;

【讨论】：

【解决方案2】：

您可以使用称为flex-flow的简写形式

flex-flow: column wrap;

查看MDN 文档了解更多信息。

【讨论】：

【解决方案3】：

您需要将flex-directon 更改为column 并给父元素一些高度

.flex-container {
        max-width: 500px;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
         height: 100px;
    }

    .flex-item {
        width: 25%;
       
    }

<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 class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
    <div class="flex-item">16</div>
    <div class="flex-item">17</div>
    <div class="flex-item">18</div>
    <div class="flex-item">19</div>
</div>

这是reference

【讨论】：

您好，感谢您的回答，但此解决方案仅在我知道 flex-container 的高度时才有效。在我的场景中，我不知道高度，因为它取决于弹性项目的数量
欢迎。在这种情况下，您可以提供max-height 而不是height。它的工作方式相同

【解决方案4】：

您可以使用flex-direction 将弹性布局从行切换到列。在包装器组件中定义方向

flex-direction: column;

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

【讨论】：