Flexbox的列從正確的方向向左

Question

我試圖創建此：http://imgur.com/G2TpjDR

我有什麼：https://jsfiddle.net/tzayffsv/

我用使用參數Flexbox的：彎曲方向：柱，柔性包裝：包裝。問題是，當包裝物品出現在屏幕外時...任何想法如何使用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>