css多列，在左侧添加列

Question

是否可以通过某种方式在css中动态填充列，每个附加列是否添加到完整列的左侧侧？ e.g。

----------
|  4 | 1 |
|    | 2 |
|    | 3 |
----------

我已经发现了webkit-clumns属性，但这些属性从左到右对齐。

提前致谢！

Answer 1

您可以使用direction: rtl;应用于列容器（并使用相反的内部元素值），例如。

Codepen ：http://codepen.io/anon/pen/bdxKbw

标记

<main>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</main>

CSS

main {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  height    : 600px;
  direction : rtl; 
}

p {
  direction : ltr; 
   -webkit-column-break-inside: avoid;
             page-break-inside: avoid;
                  break-inside: avoid;
   height   : 150px;
   margin   : 0 0 2em 0;
   padding  : 0;
   border   : 1px #ccc dashed;
}

结果（在Chrome上测试）

Answer 2

您也可以使用flex-wrap: wrap-reverse;属性通过display: flex;执行此操作。 请务必检查browser compatability。

另请参阅this useful guide to flexbox了解详情。

例如：

.flex-wrap {
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: column;
    height: 150px;
    width: 250px;
    border: 1px solid black;
}
.flex-item {
    height: 48px;
    text-align: center;
    border: 1px dotted black;
}

<div class="flex-wrap">
    <div class="flex-item"><p>1</p></div>
    <div class="flex-item"><p>2</p></div>
    <div class="flex-item"><p>3</p></div>
    <div class="flex-item"><p>4</p></div>
</div>