फ्लेक्सबॉक्स कॉलम में तत्वों का क्रम कैसे बदलें?

Question

जब तत्व कॉलम द्वारा सॉर्ट किए जाते हैं, तो वे बाएं कॉलम नीचे जाते हैं और फिर दाईं ओर नीचे जाते हैं।

कॉलम के बजाए लंबवत नीचे जाने वाले तत्वों को प्रदर्शित करने के लिए आप फ्लेक्सबॉक्स को कैसे कॉन्फ़िगर करते हैं?

उदा मैं नीचे विन्यास यहाँ चाहते हैं, शीर्ष नहीं:

मुझे कोई सफलता के साथ 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 संरेखण है। यह प्रति पंक्ति दो आइटम वाले कॉलम बनाएगा, और नंबर एक कॉलम के बजाय बाएं-दाएं, बाएं-दाएं इत्यादि, फिर अगले कॉलम के नीचे जाएगा।

#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