میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Flexbox در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش Flexbox در CSS با من همراه باشید.

بطور کلی بدونید فلکس باکس یک ماژول برای طرح بندی یا Layout بندی عناصر در یک صفحه وب می باشد، که با استفاده از این ماژول می توانیم به راحتی طرح بندی های واکنشگرا ( قابل انعطاف تری ) را در یک صفحه وب ایجاد نماییم.

قبلا ( یعنی قبل از اینکه FlexBox به وجود بیاد ) طراحان وب برای قالب بندی یا طرح بندی یک صفحه وب از ویژگی هایی همچون Float و Position استفاده می کردند.

مثلا برای اینکه بتوانند یک عکس را در سمت راست صفحه قرار دهند دچار مشکل می شدند و از ویژگی Float برای اینکار استفاده می کردند، یا ویژگی Position که باز از طریق این می شد اینکار را انجام داد.

مثال از نحوه قرار دادن یک عنصر در سمت راست صفحه با استفاده از ویژگی Float :

 

img{
float:right;
}

مثال از نحوه قرار دادن یک عنصر در سمت راست صفحه با استفاده از ویژگی Position :

در مثال بالا ما فقط تصویر داشتیم و اونو به راحتی با استفاده از ویژگی های Float و Position در سمت راست صفحه منتقل کردیم، ولی خب شاید ما چندین تصویر و کلی عنصر دیگه داشته باشیم اونجاست که دیگر واقعا Float و Position اذیت کننده می شود و غیر قابل تحمل.

پس در کل ماژولی همچون فلکس باکس یا Flexbox در CSS3 اومده تا یه انقلاب در حوزه طرح بندی صفحات وب ایجاد کند و همچنین اومده تا کار طراحان وب را خیلی راحت تر کند.


آموزش کامل فلکس باکس یا Flexbox در CSS

در اولین مرحله برای استفاده از فلکس باکس اینه که شما یک ظرف یا ( کانتینر یا Container ) با حالت نمایش فلکس ایجاد نمایید، بعد از اون ما می تونیم از ویژگی های مرتبط با فلکس بروی ظرف یا کانتینری که ایجاد کردیم استفاده نماییم.

پس برای اینکه حالت نمایش یک تگ ( که میخوایم مثه یه ظرف باشه برامون ) بصورت Flex یا فلکس باشد ما باید از ویژگی Display با مقدار Flex استفاده نماییم.

بعد از این دیگه می توانیم از ویژگی هایی که فلکس باکس در اختیارمون گذاشته بروی ظرف یا Container که ایجاد کردیم استفاده نماییم.

توجه داشته باشید که هر از ویژگی های زیر تنها در صورتی عمل خواهند کرد که ویژگی display عنصر والد یا پدر ( یا همون ظرف یا کانتینر یا Container ) بروی flex تنظیم شده باشد.

از ویژگی های زیر فقط باید در عنصر والد یا پدر که حالت نمایشش فلکس می باشد استفاده کرد.

در ادامه میخوایم با ویژگی هایی که مرتبط با فلکس باکس می باشند آشنا شویم و باهاشون کار کنیم :

 

Flex-Directionجهت قرار گیری آیتم ها را مشخص میکند
Flex-Wrapنحوه شکسته شدن آیتم ها را مشخص میکند
Flex-Flowبرای خلاصه نویسی ۲ ویژگی بالا
Justify-Contentبرای تراز آیتم ها بصورت افقی
Align-Itemsبرای تراز آیتم ها بصورت عمودی
Align-Contentبرای تراز عمودی چندین خط از آیتم ها

 


کار با ویژگی Flex-Direction در CSS

با استفاده از ویژگی flex-direction می توان جهت قرار گیری یا نحوه نمایش آیتم های موجود در یک کانتینر را مشخص کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

Rowگزینه پیش فرض – نمایش آیتم ها بصورت افقی
Row-Reverseنمایش آیتم ها بصورت افقی ولی معکوس
Columnنمایش آیتم ها بصورت عمودی
Column-Reverseنمایش آیتم ها بصورت عمودی ولی معکوس

مثال شماره ۱ : استفاده از حالت Row-Reverse

div.container{
display: flex;
flex-direction: row-reverse;
}
1

 

مثال شماره ۲ : استفاده از حالت Column

 

مثال شماره ۳ : استفاده از حالت Column-Reverse

 


کار با ویژگی Flex-Warp در CSS

با استفاده از ویژگی flex-wrap در فلکس باکس یا Flexbox در CSS3 می توان مشخص کرد که در صورت نیاز آیتم ها شکسته شود و به سطر بعدی بروند.

این ویژگی مقادیر زیر را می پذیرد :

Nowrapبصورت پیش فرض این گزینه می باشد
Wrapدر صورت نیاز آیتم ها شکسته و به سطر بعدی میروند
Wrap-Reverseدر صورت نیاز آیتم ها شکسته و بصورت معکوس نمایش داده می شوند

مثال شماره ۱ : حالت Wrap

 

مثال شماره ۲ : حالت Wrap-Reverse


کار با ویژگی Flex-Flow در CSS3

در ادامه آموزش فلکس باکس یا Flexbox در CSS3 می خواهیم با ویژگی flex-flow آشنا شویم ، این ویژگی در واقع یک ویژگی برای خلاصه نویسی ویژگی های flex-direction و flex-wrap می باشد.

شکل کلی برای استفاده از این ویژگی بصورت زیر می باشد :

  • flex-direction
  • flex-wrap

مثال :


کار با ویژگی Justify-Content در CSS3

با استفاده از ویژگی justify-content می توان موقعیت قرار گیری یا تراز آیتم ها را بصورت افقی مشخص کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

Flex-Startبصورت پیش فرض این گزینه می باشد
Flex-Endآیتم ها در قسمت پایانی ظرف قرار میگیرند
Centerآیتم ها در وسط ظرف قرار میگیرند
Space-Betweenیک فاصله مشخص در بین آیتم ها ایجاد میکند
Space-Aroundیک فاصله مشخص در اطراف آیتم ها ایجاد میکند

 

مثال شماره ۱ : حالت Flex-End

 

مثال شماره ۲ : حالت Center

 

مثال شماره ۳ : حالت Space-Between

Flexbox در CSS
Flexbox در CSS

 

مثال شماره ۴ : حالت Space-Around

4 1


کار با ویژگی Align-Items در CSS3

همانطور که از اسم این ویژگی مشخصه ، با استفاده از آن میتوان تراز آیتم های موجود در ظرف یا همون Container را بصورت عمودی مشخص کرد.

از بین مقادیر این ویژگی مقداری هست به اسم BaseLine که شاید نحوه عملکرد این مقدار کمی براتون عجیب یا غیرقابل درک باشه، به همین دلیل تصویر زیر رو براتون آماده کردم ، اگه بهش نگاه کنید میتونید قشنگ متوجه شوید که منظور از BaseLine چیه.

خب BaseLine در ظاهر دقیقا شبیه مقدار Flex-Start می باشد ولی در عملکرد کاملا فرق میکنند، مقدار Flex-Start نقطه ی شروع ظرف می باشد ولی مقدار BaseLine نقطه پایه یا ریشه ی متن می باشد.

در نتیجه در مقدار BaseLine اگه ما اندازه فونت آیتم هامون رو بزرگ و کوچک کنیم میتونیم قشنگ متوجه شیم که خط پایه متن چیه.

نمونه تصویر برای درک بهتر مقدار Flex-Start

5 1

نمونه تصویر برای درک بهتر مقدار BaseLine

6 2

از مقادیر زیر می توان در این ویژگی استفاده نمود :

Stretchبصورت پیش فرض این گزینه می باشد
Centerآیتم ها بصورت عمودی در وسط ظرف قرار میگیرند
Flex-Startآیتم ها بصورت عمودی در قسمت ابتدایی یا شروع ظرف قرار میگیرند
Flex-Endآیتم ها بصورت عمودی در قسمت پایانی ظرف قرار میگیرند
BaseLineآیتم ها به نسبت خط پایه متن تراز می شوند

مثال شماره ۱ : حالت Center

Flexbox در CSS
Flexbox در CSS

 

مثال شماره ۲ : حالت Flex-Start

 

مثال شماره ۳ : حالت Flex-End

 

مثال شماره ۴ : حالت Baseline


کار با ویژگی Align-Content در CSS3

این ویژگی تاثیر مستقیم روی ویژگی Flex-Wrap  می گذارد ، این ویژگی شبیه ویژگی Align-Items می باشد ولی با این تفاوت که این ویژگی بروی آیتم های چند خطی ( وقتی که شکسته میشن و به سطر جدید میرن ) اثر میگذارد.

از مقادیر زیر میتوان در این ویژگی استفاده نمود :

  • Stretch : گزینه پیش فرض می باشد
  • Center
  • Flex-Start
  • Flex-End
  • Space-Between
  • Space-Around

مثال شماره ۱ : حالت Center

مثال شماره ۲ : حالت Flex-Start

مثال شماره ۳ : حالت Flex-End

مثال شماره ۴ : حالت Space-Between

مثال شماره ۵ : حالت Space-Around


آشنایی با دیگر ویژگی های مرتبط با Flexbox در CSS3

خب دوستان تا اینجا بهتون خسته نباشید میگم، شاید یکم طولانی شد این جلسه ، ولی خب باید با آموزش کامل فلکس باکس یا Flexbox در CSS3 آشنا می شدید.

حال در ادامه میخوام چندین ویژگی دیگه بهتون معرفی کنم که این ویژگی ها نیز مرتبط با فلکس باکس می باشند و ما میتونیم از این ویژگی ها بروی آیتم های یک ظرف فلکس استفاده نماییم :

ویژگی های زیر فقط بروی آیتم های یک فلکس باکس عمل میکنند نه عنصر والد یا همون ظرف فلکس .

Flex-Growمیزان بزرگ بودن یک آیتم را نسبت به دیگر آیتم ها مشخص میکند
Flex-Shrinkمیزان کوچک بودن یک آیتم را نسبت به دیگر آیتم ها مشخص میکند
Flex-Basisیک اندازه پایه را برای آیتم مشخص میکند
Flexبرای خلاصه نویسی ۳ ویژگی بالا
Align-Selfبرای تنظیم تراز یک آیتم دلخواه از بین چندین آیتم
Orderترتیب قرار گیری آیتم ها را مشخص میکند

 


کار با ویژگی Flex-Grow در CSS3

با استفاده از این ویژگی میتوان مشخص کرد که یک آیتم در ظرف یا همون Container چقد میتواند رشد کند یا بزرگ شود و فضای ظرف را اشغال کند.

مقداری که این ویژگی می پذیرد یک مقدار عددی می باشد. ( مثله ۴ )

مثال :

امتحان کنید


کار با ویژگی Flex-Shrink در CSS3

این ویژگی برعکس ویژگی Flex-Grow عمل می کند و باعث می شود یک آیتم اندازش به نسبت دیگر آیتم ها کوچکتر ( رشد کمتر ) داشته باشد.

مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد. ( مثله ۴ )

مثال :


کار با ویژگی Flex-Basis در CSS3

با استفاده از این ویژگی نیز می توان یک اندازه ( سایز ) پایه را برای یک آیتم ( یا چندین آیتم ) مشخص کرد ، مقداری که این ویژگی میپذیرد میتواند با استفاده از واحدهای اندازه گیری ( همچون پیکسل ، درصد و.. ) مشخص شود.

مثال :


کار با ویژگی Flex در CSS3

با استفاده از این ویژگی میتوان ۳ ویژگی Flex-Grow و Flex-Shrink و Flex-Basis را بصورت خلاصه نویسی نوشت ، یعنی این ۳ ویژگی را در یک خط کد بصورت خلاصه مینویسیم.

شکل کلی برای استفاده از این ویژگی بصورت زیر می باشد :

  • Flex-Grow
  • Flex-Shrink
  • Flex-Basis

مثال شماره ۱ : استفاده فقط از Flex-Grow

مثال شماره ۲ : استفاده از Flex-Grow و Flex-Basis


کار با ویژگی Align-Self در CSS3

کمی بالاتر با ویژگی Align-Items آشنا شدیم و دیدیم که با استفاده از این ویژگی میتوان آیتم های یک ظرف یا Container را بصورت عمودی ترازبندی کرد.

حال با استفاده از ویژگی Align-Self میتوان عمل ترازبندی رو فقط بروی یک آیتم انجام داد، یعنی شاید من بخوام یک آیتم را بصورت عمودی در وسط قرار بدم و آیتم دیگری را در پایین ظرف.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • Stretch
  • Center
  • Flex-Start
  • Flex-End
  • BaseLine

مثال شماره ۱ : حالت Center

مثال شماره ۲ : حالت Flex-End


کار با ویژگی Order در CSS3

با استفاده از این ویژگی می توان ترتیب قرارگیری آیتم های یک ظرف را مشخص کرد، مثلا می تونیم بگیم آیتم شماره ۲ در جایگاه شماره ۴ قرار بگیرد.

مقداری که این ویژگی می پذیرد یک مقدار عددی می باشد مثله ( ۳ )

مثال :


عدم پشتیبانی برخی از مرورگرها از ویژگی های Flexbox

در مثال های بالا حتما دیدید که قبل از دستورات از پیشوندهای -webkit- یا -ms- استفاده شده است، این پیشوندها برای اینه که نسخه های قدیمی تر مرورگرهای اینترنتی از این ویژگی ها بخوبی پشتیبانی کنند.

یعنی بطور کلی و در حالت عادی تمام ویژگی های مرتبط با فلکس باکس در نسخه های جدید مرورگرهای اینترنتی پشتیبانی می شود ولی خب ممکنه کاربر از نسخه های قدیمی تره این مرورگرها استفاده کرده باشد

پس ما باید از یسری دستورات پیشوندی استفاده نماییم تا اگه کاربر از نسخه های قدیمی تر استفاده میکنه اون ویژگی بتونه در مرورگر کاربر بخوبی و بدون مشکل عمل کند ( اجرا شود ) .

در جدول زیر از نسخه مشخص شده به بالا مرورگرها از ویژگی های فلکس باکس پشتیبانی می کنند.

نام مرورگرChromeFirefoxOperaSafariIE
پشتیبانی29.022.0481011

حال در جدول زیر می توانید پیشوندهای مناسب هر یک از مرورگرهای اینترنتی را مشاهده نمایید.

نام مرورگرChromeFirefoxOperaSafariIE
دستور پیشوندی-webkit--moz--webkit--webkit--ms-

 


امیدواریم آموزش Flexbox در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟