如何更改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-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