फ्लेक्स आइटम कॉलम दिशा कंटेनर में लपेट नहीं रहे हैं

Question

मैं विशिष्ट लेआउट के लिए flex-direction:column का उपयोग करना चाहता हूं।

मैं आमतौर पर मानक flex-direction:row का उपयोग करता हूं, इसलिए मुझे column का उपयोग करके कुछ समस्याएं मिली हैं। मुझे यह नहीं पता कि इसे कैसे नियंत्रित किया जाए और Google पर कुछ भी उपयोगी न हो।

मैं एक नियमित UL सूची मिल गया है और क्या मैं चाहता हूँ यह है:

:

1 
2 
3 
4 
5 
6 
7 

मेरे वर्तमान सरलीकृत कोड यह है:

1 3 5 7 

2 4 6 

यह क्या मैं वर्तमान में मिलता है

.ul{ 
    display: flex; 
    flex-direction: column; 

    li{ 
    width: 25%; 
    } 
} 

Answer 1

पर लागू कुल height में सक्षम होना चाहिए है ul और इसे wrap बनाएं।

फिर flex-basisul li पर लागू करें (जो ऊंचाई है क्योंकि हमने flex-direction: column) 50% पर लागू किया है। जैसा:

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 100px; 
 
} 
 
ul li { 
 
    flex-basis: 50%; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

आशा इस मदद करता है:

ul { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    height: 100px; 
} 
ul li { 
    flex-basis: 50%; /* which in this case will be '50px' */ 
} 

नीचे टुकड़ा पर एक नज़र डालें!

Answer 2

आपको फ्लेक्स कंटेनर को परिभाषित ऊंचाई देने की आवश्यकता है।

कंटेनर पर एक निश्चित ऊंचाई के बिना, आइटम नहीं जानते कि कहां लपेटना है।

आपको flex-wrap: wrap जोड़ने की भी आवश्यकता है, क्योंकि एक फ्लेक्स कंटेनर पर प्रारंभिक सेटिंग nowrap है।

Answer 3

सबसे पहले आपको flex-container और flex-wrap: wrap पर ऊंचाई सेट करने की आवश्यकता है। इसके बाद आप flex-item पर सेट कर सकते हैं और यह वांछित परिणाम देगा।

ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
} 
 
li { 
 
    flex-basis: 50%; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>

ul पर

Answer 4

उपयोग flex-wrap:wrap;। आप सख्ती से एक मूल्य के लिए ऊंचाई निर्धारित करने की आवश्यकता न लेकिन यह ऊंचाई एक समय में अधिक से अधिक 2 को रोकने के लिए सक्षम नहीं होना चाहिए, लेकिन रोकने के लिए 2.

li{ 
 
    width:50px; 
 
    list-style-type:none; 
 
    height:50px; 
 
    margin:5px; 
 
    background-color:green; 
 
    color:white; 
 
} 
 
ul{ 
 
    height:150px; 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex-wrap:wrap; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

Answer 5

सूची के लिए एकाधिक स्तंभों को पार करने वाली:

1. आप एक परिभाषित ऊंचाई निर्दिष्ट करना होगा।

2. सेट यह

(डिफ़ॉल्ट यह nowrap पर सेट किया जाता द्वारा) flex-wrap: wrap का उपयोग करके रैप करने के लिए डेमो नीचे देखें:

ul { 
 
    list-style: none; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 50px; 
 
} 
 
li { 
 
    width: 25%; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>