ফ্লেক্স আইটেমের DOM অর্ডার পরিবর্তন না করে ভিজ্যুয়াল অর্ডার পরিবর্তন করার জন্য `order` প্রোপার্টি ব্যবহার করা হয়।
উদাহরণ: ফ্লেক্স আইটেম রি-অর্ডার
<!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>ফ্লেক্স আইটেম রি-অর্ডার উদাহরণ</h1>
<div class="container">
<div class="first">প্রথম ডিভ</div>
<div class="second">দ্বিতীয় ডিভ</div>
<div class="third">তৃতীয় ডিভ</div>
</div>
</body>
</html>
কোড ব্যাখ্যা
- order: 1 (third): সবচেয়ে আগে দেখাবে।
- order: 2 (first): দ্বিতীয়ে দেখাবে।
- order: 3 (second): শেষে দেখাবে।
- ডিফল্ট order: 0: কম মান আগে দেখাবে।
ব্যবহার ক্ষেত্র
রেসপন্সিভ ডিজাইনে মোবাইলে গুরুত্বপূর্ণ কন্টেন্ট উপরে আনন্দার জন্য, বা CMS-এ কন্টেন্ট রি-অর্ডারিংয়ের জন্য।
