यहाँ मेरे पास फिडल है
ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
height: 100px;
background: #333;
padding: 15px;
}
ul li {
padding: 15px;
margin: 5px;
background: #efefef;
border: 1px solid #ccc;
display: inline-block;
list-style: none;
}
#item-1 {
height: 50px;
}
#item-2 {
height: 70px;
}<ul>
<li id="item-1">Home</li>
<li id="item-2">Menu</li>
<li>More</li>
<li>Stuff</li>
<li>Settings</li>
</ul>मैं चाहता हूं कि फ्लेक्स-बॉक्स के अंदर अंतिम आइटम को अन्य सभी वस्तुओं को रखने के दौरान दाईं ओर ("सेटिंग" मेरी फ़िडल में) खींच दिया जाए । "सेटिंग्स" -यह भी लंबवत और सब कुछ केंद्रित होना चाहिए।
align-self: flex-end आइटम को नीचे की ओर धकेलता है (मैं इसे दाईं ओर चाहता हूं)।
मैं फ्लेक्स-बॉक्स का उपयोग कर एक समाधान को बहुत पसंद करूंगा क्योंकि मेरी वस्तुओं में परिवर्तनशील ऊंचाइयां हैं और उन्हें हमेशा लंबवत केंद्रित होना चाहिए।
इसे प्राप्त करने का सबसे साफ तरीका क्या है?
आपकी सहायताके लिए धन्यवाद!