CSS Flexbox, Right to Left Content, Aligned Right, Justified Bottom

user_1563181 0
Viewed 84

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.

css
3 Answers

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

.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

user_25048880

you can add one thing to your parent :

direction:rtl;

and it will be ok ;)

user_160957240
Related