एक तत्व को फ्लेक्सबॉक्स

Question

के साथ सूची के अंत में ले जाएं, मैं सीएसएस का उपयोग करके सूची के अंत में "3" कैसे स्थानांतरित कर सकता हूं?

jsbin here

ul { 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 

 
.end { 
 
    align-self: flex-end; /* this doesn't work; how can I move 3 to the end? */ 
 
}

<ul> 
 
    <li class="end">3</li> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul>

Answer 1

उपयोग order संपत्ति देखें। इस मामले में, order: 1 काम करता है क्योंकि अन्य तत्वों का क्रम क्रमशः 0 पर सेट होता है।

ul { 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 

 
.end { 
 
    order: 1; 
 
}

<ul> 
 
    <li class="end">3</li> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul>

Answer 2

आप order सेट कर सकते हैं - end तत्व पर order:1 जोड़ने सूची के अंत में यह जगह करने के लिए - हम इसे अन्य फ्लेक्स बच्चों वे करेंगे के लिए निर्दिष्ट नहीं करते हैं के रूप में शून्य का डिफ़ॉल्ट मान लें। नीचे

डेमो

देखें:

ul { 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
} 
 

 
.end { 
 
    align-self: flex-end; 
 
    order:1; 
 
}

<ul> 
 
    <li class="end">3</li> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    </ul>