html - 如何使用css将行切换为列

Question

嗨，我想使用 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>

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

我需要：最后一步

标签： htmlcss

Answer 1

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

flex-direction:column;