CODEWITHSUNDEEP
htmlcssflexbox
Jen Wong
Jen Wong

Reputation: 51

Flexbox with direction: column but multi-column stack by-side

Current layout: Current layout

Hi, i made a layout with flexbox and it was set flex-direction: row; then it arranged (1.left) (2.right) (3.left)(4.right), which i set the child to be width: 50%.

But what i need to archive is more to flex-direction: column, but to have 2 column which the bottom half of the items will move to the right.

Desired result: Desired result

Current code :

    .ds-content div{
        display: inline-flex;
        flex-wrap: wrap;
        align-items: flex-start;
     }

Change to direction: column;

    .ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 100%;
         height: 150px;
     }

The issue i have is i cannot set a fix height for this flexbox (to push bottom-half content to the right), the content is dynamic fetch from user admin; dynamic in terms of content length and amount of child.

Thanks in advance !

Upvotes: 4

Views: 13276

Answers (4)

timmmmmy
timmmmmy

Reputation: 36

if you are doing flex-direction column with flex-wrap and expand beyond the height you get this behavior automatically.

element.style {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 470px;
}

`

Upvotes: 0

tha
tha

Reputation: 56

After searching for a solution to this for a long time, I found the solution.

If you use an Angular you can do it simply that way:

  .ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 50%;
     }

<div class="ds-content">
  <div>
    <ng-container *ngFor="let item of anArray| slice:0:(anArray.length/2+anArray.length%2)">
    </ng-container>
  </div>
  <div>
    <ng-container *ngFor="let item of anArray| slice:(anArray.length/2+anArray.length%2):anArray.length">
    </ng-container>
  </div>
</div>

for only HTML CSS JS, you can use:

     const anArray = [
            { tittle: "1", body: "Example 1" },
            { tittle: "2", body: "Example 2" },
            { tittle: "3", body: "Example 3" },
            { tittle: "4", body: "Example 4" },
            { tittle: "5", body: "Example 5" },
            { tittle: "6", body: "Example 6" }
        ]
        
        function fill2flexColumn() {
            let value = '';
            let part1 = anArray.slice(0 , anArray.length/2+anArray.length%2);
            let part2 = anArray.slice(anArray.length/2+anArray.length%2,anArray.length );

             part1.forEach((post) => {
                value += `<li>${post.tittle} - ${post.body}</li>`;
            });
            document.querySelector('.ds-content .part1').innerHTML = value;
            value ='';
            part2.forEach((post) => {
                value += `<li>${post.tittle} - ${post.body}</li>`;
            });

            document.querySelector('.ds-content .part2').innerHTML = value;
        };
        
        fill2flexColumn();
.ds-content{
         display: flex;
         flex-wrap: wrap;
}
.ds-content div{
         display: inline-flex;
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         width: 50%;
     }
    <body>
       <div class="ds-content">
        <div class="part1"></div>
        <div class="part2"></div>
      </div>
</body>

Upvotes: 0

Johannes
Johannes

Reputation: 67768

I think for this it's better to use columns:

.ds-content div {
     width: 100%;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

browser support might be an issue, though...

Upvotes: 2

H&#233;ctor Le&#243;n
H&#233;ctor Le&#243;n

Reputation: 2400

check my solution in Codepen

I keep the flex-direction: row in order to use align-content: stretch and have equal height in the flex-items. Now you just have to play with the order property.

Upvotes: 2

Related Questions