CSS3 ব্যবহার করে পৃথক ফ্লেক্স আইটেম পুনরায় সাজাতে, অর্ডার সম্পত্তি ব্যবহার করুন। ফ্লেক্স আইটেমগুলিকে পুনঃক্রম করার জন্য কোড নিচে দেওয়া হল -
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { height: 150px; display: flex; width: 100%; border: 2px solid red; } div { width: 200px; height: 150px; color: white; text-align: center; font-size: 30px; } .first { background-color: rgb(55, 0, 255); order:2; } .second { background-color: red; order:3; } .third { background-color: rgb(140, 0, 255); order:1; } </style> </head> <body> <h1>Reordering individual items example</h1> <div class="container"> <div class="first">First Div</div> <div class="second">Second Div</div> <div class="third">Third Div</div> </div> </body> </html>
আউটপুট
উপরের কোডটি নিম্নলিখিত আউটপুট −
তৈরি করবে