Flexbox列从右到左方向

I'm trying to create this: http://imgur.com/G2TpjDR

我正在努力创建这个:http://imgur.com/G2TpjDR

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

我有什么: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..

我使用带有参数的flexbox:flex-direction:column,flex-wrap:wrap。问题是包装时出现在屏幕外的项目...有任何想法如何使用flexbox(或mbe其他想法)这样做?我不寻找使用javascript和定位项目作为绝对的解决方案..

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

2 个解决方案

#1

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

这很有效。 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>

#2

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

这与flexbox没有直接关系,您只需要将文本的方向设置为从右到左。这可以很容易地实现

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

#1