以正确的顺序显示3列中的flex块

Question

使用flexbox或任何其他css技术可以实现这一点，而不涉及将每个列放在包装器中？

最佳结果以正确的顺序对齐它们，但第4个元素位于最长的容器下，不在其上方的元素下。

我正在使用指南针，目前我的scss是：

  ul.level0 {
    @include display-flex;
    @include flex-flow(row wrap);
    @include justify-content(flex-end);
    @include align-items(flex-start);
    @include align-content(flex-start);

    .menu-group {
      @include display-flex(inline-flex);
      vertical-align: top;
      width: 33.33%;
      margin-bottom: 30px;
      padding: 0 5px;

      li {
        display: block;
        text-align: left;
        margin-bottom: 3px;
      }

      .group-title {
        margin-bottom: 12px;
        text-transform: uppercase;
      }
    }
  }

Answer 1

您可以使用flex-wrap，flex-direction和order：

ul {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:300px;
  margin:1em;
  padding:0;
  list-style-type:none;
}
li {height:80px;
border:solid;
width:30%;
margin:1em;
order:5}
li:nth-child(odd) {
  height:40px;
}
li:first-child {
  height:100%;
}
li:nth-child(1) {
  order:1
}
li:nth-child(2) {
  order:2
}
li:nth-child(3) {
  order:4
}
li:nth-child(4) {
  order:3
}
li:nth-child(5) {
  order:5
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>