order چیست؟
در CSS، ویژگی order برای تعیین ترتیبی که موارد فلکس داخل یک کانتینر فلکس ظاهر می‌شوند، استفاده می‌شود.
ترتیب موارد فلکس توسط مقادیر ویژگی order آن‌ها تعیین می‌شود. موارد فلکس با مقدار کمتر از ویژگی order ابتدا نمایش داده می‌شوند.
موارد زیر نیز باید در نظر داشته شوند:
- ویژگی order به ارث نمی‌رود و تنها بر روی عناصر فلکس تأثیر می‌گذارد.
- ویژگی order تنها بر روی موارد فلکس تأثیر دارد.
- مقدار پیش‌فرض ویژگی order برابر با 0 است.
در زیر مقادیر ممکن برای ویژگی order آمده است:
- عدد صحیح: نشان دهنده گروه ترتیبی است که توسط مورد استفاده می‌شود.
- inherit: از همان مقدار والدین استفاده می‌کند.
- initial: عنصر از مقدار پیش‌فرض، یعنی 0، استفاده می‌کند.
CSS Order Integer
ویژگی CSS order به یک مقدار عدد صحیح تنظیم می‌شود. مقدار ویژگی order می‌تواند هر عدد صحیح مثبت یا منفی باشد.
ما می‌توانیم از ویژگی order با مقدار صحیح مثبت استفاده کنیم. مقدار مثبت به این معناست که آیتم با بیشترین مقدار مثبت order آخرین نمایش داده می‌شود.
مثال در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 2">Item 1</div>
<div style="order: 6">Item 2</div>
<div style="order: 4">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: 3">Item 5</div>
<div style="order: 5">Item 6</div>
</div>
</body>
</html>ویژگی CSS order می‌تواند به مقدار عدد صحیح منفی تنظیم شود. مقدار منفی به این معناست که آیتم‌هایی با بیشترین مقدار منفی order ابتدا نمایش داده می‌شوند.
مثال در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 4">Item 1</div>
<div style="order: 6">Item 2</div>
<div style="order: -3">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: -5">Item 5</div>
<div style="order: 2">Item 6</div>
</div>
</body>
</html>CSS Order Initial
ویژگی order: initial به سادگی مقدار ویژگی order آیتم را به مقدار اولیه آن تنظیم می‌کند، که معمولاً ۰ است.
مثال در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 5">Item 1</div>
<div style="order: 3">Item 2</div>
<div style="order: 1">Item 3</div>
<div style="order: 6">Item 4</div>
<div style="order: initial">Item 5</div>
<div style="order: 4">Item 6</div>
</div>
</body>
</html>CSS Order Unset
ویژگی order: unset به معنای حذف کردن هرگونه تنظیماتی که بر روی ویژگی order قبلاً اعمال شده باشد، و اجازه می‌دهد تا آیتم flex به ترتیب پیش‌فرض خود نمایش داده شود که بر اساس نشانه‌گذاری HTML است.
مثال در اینجا یک مثال آورده شده است که در آن ویژگی order به مقدار unset برای آیتم flex ۳ تنظیم شده است. سپس آیتم flex ۳ با ترتیب پیش‌فرض خود نمایش داده می‌شود:
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 2">Item 1</div>
<div style="order: 4">Item 2</div>
<div style="order: unset">Item 3</div>
<div style="order: 1">Item 4</div>
<div style="order: 3">Item 5</div>
<div style="order: 5">Item 6</div>
</div>
</body>
</html>CSS Order Revert
ویژگی order: revert به معنای نمایش آیتم flex با توجه به ترتیبی است که در نشانه‌گذاری HTML ظاهر می‌شود، اما با ترتیب معکوس.
مثال در این مثال، ویژگی order به مقدار revert برای آیتم flex پنجم تنظیم شده است. سپس ترتیب آیتم flex پنجم برعکس شده و به این ترتیب ابتدا نمایش داده می‌شود:
<!DOCTYPE html>
<html>
<head>
<style>
.my_flex_container {
display: flex;
background-color: #0ca14a;
height: 90px;
}
.my_flex_container div {
background-color: #FBFF22;
padding: 10px;
margin: 10px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_flex_container">
<div style="order: 5">Item 1</div>
<div style="order: 3">Item 2</div>
<div style="order: 1">Item 3</div>
<div style="order: 6">Item 4</div>
<div style="order: revert">Item 5</div>
<div style="order: 4">Item 6</div>
</div>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام