Come modificare l'ordine degli elementi in una colonna flexbox?

Question

Quando gli elementi sono ordinati per colonna, scendono nella colonna di sinistra e poi in basso a destra.

Come si configura la flexbox in modo che gli elementi vengano visualizzati verticalmente anziché in colonne?

ad es. Voglio che la configurazione di fondo qui, non il top:

Ho esaminato flex-direction senza successo. Questo è possibile anche con la flexbox?

ho questo momento:

#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

Sembra che quello che stai cercando è un allineamento row con lo spostamento dopo ogni due elementi. Ciò creerà una colonna con due elementi per riga e la numerazione andrà a sinistra-destra, sinistra-destra, ecc., Invece di una colonna in basso, quindi in basso nella colonna successiva.

In primo luogo, rendono il div un contenitore flessibile:

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

Poi, specificare che ogni elemento flex dovrebbe coprire il 50% della larghezza del contenitore:

.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