আমার কাছে ফিডল যা আছে তা এখানে
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>আমি চাই অন্যান্য সমস্ত আইটেমের মতো করে রেখে ফ্লেক্স-বাক্সের অভ্যন্তরের শেষ আইটেমটি ডানদিকে টানুন (আমার ফিডেলের "সেটিংস")। "সেটিংস" -item এছাড়াও উল্লম্বভাবে এবং সবকিছুতে কেন্দ্রিক হওয়া উচিত।
align-self: flex-end আইটেমটি নীচে ঠেলা দেয় (আমি এটি ডানদিকে চাই)।
আমি ফ্লেক্স-বাক্স ব্যবহার করে সমাধানটিকে খুব পছন্দ করব কারণ আমার আইটেমগুলির পরিবর্তনশীল উচ্চতা রয়েছে এবং সর্বদা উল্লম্বভাবে কেন্দ্রীভূত হওয়া উচিত।
এটি অর্জনের সবচেয়ে পরিষ্কার উপায় কী?
আপনার সাহায্যের জন্য ধন্যবাদ!