آموزش واکنش گرایی صفحات وب قدم پنجم

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

آموزش واکنش گرایی صفحات وب قدم پنجم

Free-Learn

آموزش واکنش گرایی صفحات وب قدم پنجم

خب دوستان در این قدم ما میتونیم از تکنیک / فناوری فلکس باکس یا Flexbox برای واکنش گرایی عناصر در صفحات وبمون استفاده نماییم.

بنده آموزش فلکس باکس رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید ، چرا که در این بخش بصورت کلی با فلکس باکس کار میکنیم و وارد جزئیات نخواهیم شد.

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

Free-Learn

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

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

برای استفاده از فلکس باکس ۲ کار کلی باید انجام بدیم :

  1. تعریف ظرف فلکس ( برای نگهداری آیتم های فلکس )
  2. تعریف آیتم های فلکس ( که در ظرف فلکس قرار میگیرند )

تعریف ظرف فلکس

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

تعریف آیتم های فلکس

حالا هرچی بزاریم داخل این ظرف ، میشه فرزند یا آیتمی از فلکس باکس به همین راحتی!

Free-Learn

یکم حرفه ای تر با فلکس باکس کار کنیم

مثال شماره ۱ : طرح بندی ساده با ۳ آیتم + واکنش گرایی در دستگاهای مختلف بدون استفاده از دستور media@

امتحان کنید

مثال شماره ۲ : گالری تصویر واکنش گرا بدون استفاده از دستور media@

امتحان کنید

مثال شماره ۳ : طرح بندی ساده یک قالب + واکنش گرایی با استفاده از دستور media@

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب