CODEWITHSUNDEEP
cssflexbox
Grammka
Grammka

Reputation: 65

Flexbox columns direction from right to left

I'm trying to create this: https://i.sstatic.net/QLsuA.jpg

What I have: https://jsfiddle.net/tzayffsv/

I use flexbox with params: flex-direction: column, flex-wrap: wrap. The Problem is that items going outside the screen when wrapping... Any ideas how to do this using flexbox (or mbe other ideas)? I don't look for solutions with javascript and positioning items as absolute..

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

Upvotes: 3

Views: 4531

Answers (2)

Ronnie Smith
Ronnie Smith

Reputation: 18545

This works. flex-flow: column wrap-reverse;

    .box {
    height:200px;
    width:300px;
    background:grey;
    display: flex;
    flex-flow: column wrap-reverse;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-end;
    }
    
    .item {
    flex: 0 1 auto;
    align-self: auto;
    min-width: 0;
    min-height: 40%;
    border:1px solid black;
    }
    <div class="box">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>

Upvotes: 7

Oriol
Oriol

Reputation: 287950

This is not directly related to flexbox, you only need to set the direction of the text to be right-to-left. This can be easily achieved with

.container {
  direction: rtl;
}


.container {
  direction: rtl;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  right: 50px;
  height: 600px;
}
.item {
  width: 200px;
  height: 140px;
  line-height: 60px;
  background-color: #618ae4;
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  color: #fff;
}
<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>

Upvotes: 5

Related Questions