Jak zmienić kolejność elementów w kolumnie flexbox?

Question

Gdy elementy sortowane są według kolumn, przechodzą w dół po lewej kolumnie, a następnie w prawo.

Jak skonfigurować Flexbox do wyświetlania elementów idących w pionie zamiast w kolumnach?

np. Chcę dolną konfigurację tutaj, a nie top:

Przyjrzeliśmy się flex-direction bez powodzenia. Czy to jest możliwe z Flexbox?

mam to obecnie:

#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

Wydaje się, że to, czego szukasz jest row dostosowanie opakowania po każdych dwóch elementów. Spowoduje to utworzenie kolumny z dwiema pozycjami w wierszu, a numeracja zostanie przesunięta w lewo-prawo, lewo-prawo itd., Zamiast w dół o jedną kolumnę, a następnie o następną kolumnę.

Po pierwsze, upewnij się div flex pojemnika:

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

Następnie należy określić, że każdy element elastyczny powinien obejmować 50% szerokości kontenera:

.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