5

Trying to layout the following tiles in CSS, but can't seem to find the right combination of align/justify.

enter image description here

Here's what I got so far:

    .container {
        border: 3px solid red;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-end;        
        width: 100%;
        height: 500px;
    }
    .item {
        border: 3px solid red;
        width: 150px;
        height: 150px;
    }
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>

The result is not right to left and it's not "pushed" to the right side.

0

3 Answers 3

5

Here is what you need:

.container {
  border: 3px solid red;
  display: flex;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  width: 100%;
  height: 500px;
}

.item {
  border: 3px solid red;
  width: 150px;
  height: 150px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Instead of using:

flex-direction: column;
flex-wrap: wrap-reverse;

You could also use:

flex-flow: column wrap-reverse;
1

.container {
        border: 3px solid red;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap-reverse;
        align-items: flex-end;
        justify-content: flex-end;        
        width: 100%;
        height: 500px;
    }
    .item {
        border: 3px solid red;
        width: 150px;
        height: 150px;
    }
<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>

Super close, just need to change your wrap direction

1

you can add one thing to your parent :

direction:rtl;

and it will be ok ;)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.