آموزش CSS

آموزش مبحث Order در CSS

آموزش کامل و تصویری استفاده از Order در مبحث سی اس اس به همراه پروژه کوچک

در طراحی ریسپانسیو (واکنشگرا) نیاز به دانستن چند مطلب مختلف می باشد که Order یکی از آنهاست و به همین دلیل امروز با شما هستیم و آموزش مبحث Order در CSS به همراه تصاویر و یک پروژه کوچک برای درک بهتر شما دانشجویان عزیز مدرسه وبری.

Order چیست و چه کاربردی دارد؟

Order یک صفت برای المان شماست که نشان دهنده ترتیب قرار گرفتن آن در یک ظرف فلکس می باشد (display:flex).به طور دیفالت,اقلام موجود در یک فلکس باکس بر اساس جایگاه کدهای خود قرار می گیرند و هر کدام بالاتر باشد,در نتیجه اول خواهد بود.

آموزش order در css

در شکل بالا,مربع قرمز رنگ چون بالاتر از دو مربع دیگر کدش نوشته شده است,پس اول نشان داده می شود (اس سمت چپ به راست حساب می شود) و هیچ Order به هیچکدام از مربع ها نداده ایم.

شروع کار با Order

خب اکنون باید کدهای HTML خودمان را بنویسیم که می خواهیم 6 تا مستطیل درست کنیم با رنگ مختلف.برای این کار می توانید از کد زیر استفاده کنید :

  • دقت داشته باشید که فایل CSS خود را حتما لینک کنید تا کدها اثر کنند.
  • توجه کنید که تمام باکس ها درون یک Div قرار دارند که باید به آن استایل Display:flex دهیم تا order کار کند.

خب بعد از ساخت باکس ها,باید کدهای CSS را وارد کنیم که بسیار راحت است.

خب همانطور که مشاهده می کنید ما هیچ Order به آیتم هایمان نداده ایم و تنها رنگ آنها را مشخص کرده ایم تا درک مفهوم برای شما راحت تر باشد.منظور از Contain > div. یعنی تمام Div هایی که درون کلاس Contain قرار دارند (کادرهای رنگی).

طراحی سایت در کرج

آموزش کار با order

 

* هر چقدر عدد Order بیشتر باشد,المان شما به سمت راست یا پایین (انتها) می رود.در حالت عادی تمام المان ها دارای اُردر 0 هستند.برای مثال اگر ما به جعبه قرمز رنگ Order:1 دهیم,به آخر می رود.همچنین عدد Order می تواند منفی هم باشد و هر چقدر عدد منفی ما کوچک تر باشد (منفی 9 از منفی 5 کوچک تر است),المان ما به سمت چپ تر یا بالاتر می رود.

اموزش کار با order

مثال : اکنون می خواهیم کارهای زیر را انجام دهیم :

جعبه زرد : در ابتدا قرار گیرد | جعبه قرمز : بعد از زرد (جایگاه دوم) | جعبه بنفش : در آخر قرار گیرد

راه حل : به تصویر اول نگاه کنید که زرد در آخر قرار دارد و قرمز هم در جایگاه دوم.پس اگر بخواهیم زرد در ابتدا باشد و قرمز هم بعد آن قرار بگیرد,باید زرد دارای مقدار 2- باشد و قرمز هم 1- و جعبه سیاه هم که 0 هست.جعبه بنفش هم با Order:1 در آخر قرار خواهد گرفت.

خب همانطور که مشاهده می کنید ما Order ها را داده ایم که نتیجه مانند شکل زیر خواهد شد.

آموزش کار با Order

خب آموزش مبحث Order در CSS هم به پایان رسید و امیدواریم شما هم از آن راضی بوده باشید,اگر سوالی دارید می توانید از بخش نظرات استفاده کنید تا کارشناسان مدرسه وبری به آن پاسخ دهند.

 

برچسب ها

Alizeynali

سلام من علی محمد زینالی,مدیر و موسس شرکت وبری و متولد سال 1377.از بچگی علاقه زیادی به کار با کامپیوتر داشتم که با بازی شروع شد و رسید به سئو و برنامه نویسی! خیلی دوست دارم چیزایی که یاد گرفتم رو به بقیه هم منتقل کنم و این هم باعث پیشرفت شما میشه و هم من بهتر نکات رو یادم میمونه.امیدوارم از مطالبی که براتون می نویسم راضی باشید. Good Luck

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن