如何更改flexbox列中元素的顺序？

Question

当元素按列排序时，它们沿着左列向下，然后向右下方。

如何配置flexbox以显示垂直向下而不是列中的元素？

e.g。我想要底部配置，而不是顶部：

我调查flex-direction但没有成功。这对Flexbox来说是否可行？

我目前有这个：

#flex-container {
  background-color: #000;
  width: 100%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  text-align: center;
}
.flex-element {
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-column-gap: 10px;
  margin-bottom: 10px;
  background-color: #fff;
}

<div id="flex-container">
  <div class="flex-element">
    <p>1</p>
  </div>
  <div class="flex-element">
    <p>2</p>
  </div>
  <div class="flex-element">
    <p>3</p>
  </div>
  <div class="flex-element">
    <p>4</p>
    <p>--</p>
  </div>
  <div class="flex-element">
    <p>5</p>
    <p>--</p>
    <p>--</p>
  </div>
  <div class="flex-element">
    <p>6</p>
  </div>
  <div class="flex-element">
    <p>7</p>
  </div>
</div>

https://jsfiddle.net/ckecz95r/

Answer 1

看起来你正在寻找的是row对齐每两个项目之后的包装。这将创建一个每行包含两个项目的列，编号将左右，左右等，而不是向下一列，然后向下一列。

首先，将div设为灵活容器：

#flex-container {
    display: flex;          /* create flex container */
    flex-direction: row;    /* default rule; can be omitted */
    flex-wrap: wrap;        /* overrides default nowrap */
    width: 100%;
}

然后，指定每个弹性项目应覆盖容器宽度的50％：

.flex-element {
    flex-basis: calc(50% - 20px);  /* take 50% width less margin */
    align-self: flex-start;        /* disable stretch default height */
    margin: 10px;                  /* for demo purposes */
    background-color:#fff;         /* for demo purposes */

Revised Demo