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

Question

当元素按列排序时,它们沿着左列向下,然后向下向右.

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

例如,我想要底部配置,而不是顶部:

我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 容器：

#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 */

修改后的演示