Flexbox列从右到左方向

Question

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

我有什么:https://jsfiddle.net/tzayffsv/

我使用带有参数的flexbox:flex-direction:column,flex-wrap:wrap.问题是包装时出现在屏幕外的物品......有任何想法如何使用flexbox(或其他想法)做到这一点？我不寻找使用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>

Answer 1

这有效. 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>

Answer 2

这个和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>