این آموزش در تاریخ ۱۴۰۰/۱۰/۲۵ آپدیت شده است.
آموزش واکنش گرایی صفحات وب قدم پنجم
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم پنجم با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش واکنش گرایی صفحات وب قدم پنجم
خب دوستان در این جلسه ما میتونیم از تکنیک فلکس باکس یا Flexbox برای واکنش گرایی عناصر در صفحات وبمون استفاده نماییم.
بنده آموزش فلکس باکس رو بطور کامل در یک مطلب جداگانه ارسال کردم که ازتون خواهش میکنم اول از طریق لینک زیر این آموزش رو مشاهده و مطالعه نمایید بعدش تشریف بیارید داخل این آموزش ( چون در این جلسه من فقط چنتا مثال از فلکس باکس میزنم و کاری به آموزش خوده فلکس باکس ندارم )
برای مشاهده آموزش کامل فلکس باکس در CSS اینجا کلیک نمایید.
Free-Learn
استفاده از فلکس باکس برای واکنش گرایی عناصر
ما میتونیم بدون استفاده از دستور media@ ( قدم سوم از واکنش گرایی ) ، صرفا با استفاده از فلکس باکس عناصر رو اندازه های مختلف صفحه نمایش واکنش گرا کنیم.
برای استفاده از فلکس باکس ۲ کار کلی باید انجام بدیم :
- تعریف ظرف فلکس ( برای نگهداری آیتم های فلکس )
- تعریف آیتم های فلکس ( که در ظرف فلکس قرار میگیرند )
- تعریف ظرف فلکس
خیلی راحت با استفاده از ویژگی display میتونیم حالت فلکس باکس رو روی یک تگ ایجاد کنیم.
|
1 2 3 |
.MyContainer{ display: flex; } |
- تعریف آیتم های فلکس
حالا هرچی بزاریم داخل این ظرف ، میشه فرزند یا آیتمی از فلکس باکس به همین راحتی!
|
1 2 3 4 5 6 |
<div class="MyContainer"> <div class="MyItem">1</div> <div class="MyItem">2</div> <div class="MyItem">3</div> <div class="MyItem">4</div> </div> |
Free-Learn
مثال های مختلف از فلکس باکس
مثال شماره ۱ : طرح بندی ساده با ۳ آیتم + واکنش گرایی
|
1 2 3 4 5 |
.MyContainer { display: flex; flex-direction: row; flex-wrap: wrap; } |
مثال شماره ۲ : گالری تصویر واکنش گرا با استفاده از فلکس باکس
|
1 2 3 4 5 |
.MyContainer { display: flex; flex-direction: row; flex-wrap: wrap; } |
مثال شماره ۳ : قرار دادن یک عنصر در وسط باکس ( هم بصورت افقی و عمودی ) با استفاده از فلکس باکس
|
1 2 3 4 5 |
.MyContainer{ display: flex; justify-content: center; align-items: center; } |
مثال شماره ۴ : واکنش گرایی آیتم ها در صفحه نمایش های کوچکتر ( مثه موبایل ) – یعنی در گوشی موبایل آیتم ها میوفتن زیر هم
|
1 2 3 4 5 6 |
/* وقتی عرض صفحه کمتر از 600 پیکسل شد */ @media (max-width: 600px){ .MyContainer{ flex-direction: column; } } |
مثال شماره ۵ : گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی
|
1 2 3 4 5 6 7 8 9 10 11 |
.MyContainer{ display: flex; flex-wrap: wrap; padding: 0 4px; } .Seton{ flex: 25%; max-width: 25%; padding: 0 4px; } |
