0

Hi I want to change rows into columns using css. This is what my actually code looks like:

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

In the browser i have this: first step

enter image description here

I need to have that: final step

enter image description here

zerbene
  • 1,249
  • 2
  • 7
  • 21
Marek Rzepka
  • 11

4 Answers4

2

Use Flex-direction to change the direction of flex from row to column . By default the direction of flex is ROW . by using flex-direction:col we can switch from row to column.

flex-direction:column;
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
SurviShirodkar
  • 21
  • 2
0

You can use flex-direction to switch a flex layout from row to col. Define the direction in the wrapper component

flex-direction: column;

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

Deitsch
  • 1,610
  • 14
  • 28
0

You need to change the flex-directon to column and give some height to the parent element

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

Here's the reference

Mr.7
  • 2,292
  • 1
  • 20
  • 33
  • Hi thanks for your answer, but this solution works only when i know height of the flex-container. In my scenario i dont know the height because it is depends on amount of flex-item – Marek Rzepka Sep 09 '21 at 07:46
  • Welcome. In that case, you can give `max-height` instead of `height`. It works the same way – Mr.7 Sep 09 '21 at 07:49
0

You can use a short-hand called flex-flow

flex-flow: column wrap;

Check MDN docs for more info.

Vikram Negi
  • 29
  • 9