css - 以正确的顺序在 3 列中显示 flex block

Question

使用 flexbox 或任何其他不涉及将每一列放入包装器中的 css 技术是否可以实现类似的功能？

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

我正在使用 compass ，目前我的 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>