این آموزش در تاریخ ۱۴۰۰/۱۰/۲۵ آپدیت شده است.

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

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

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

Free-Learn

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

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

بنده آموزش فلکس باکس رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم اول از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید بعدش تشریف بیارید داخل این آموزش ( چون در این جلسه من فقط چنتا مثال از فلکس باکس میزنم و کاری به آموزش خوده فلکس باکس ندارم )

برای مشاهده آموزش کامل فلکس باکس در CSS اینجا کلیک نمایید.

Free-Learn

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

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

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

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

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

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

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

Free-Learn

مثال های مختلف از فلکس باکس

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

امتحان کنید

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

امتحان کنید

مثال شماره ۳ : قرار دادن یک عنصر در وسط باکس ( هم بصورت افقی و عمودی ) با استفاده از فلکس باکس

امتحان کنید

مثال شماره ۴ : واکنش گرایی آیتم ها در صفحه نمایش های کوچکتر ( مثه موبایل ) – یعنی در گوشی موبایل آیتم ها میوفتن زیر هم

امتحان کنید

مثال شماره ۵ : گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی

امتحان کنید

Free-Learn

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