آموزش چیدمان های Responsive پیشرفته با CSS Flexbox

مقدمه Introduction

• خوش آمدی Welcome

• نحوه استفاده از پرونده های تمرینی How to use the exercise files

1. Flexbox چیست؟ 1. What Is Flexbox?

• Flexbox چیست؟ What is Flexbox?

• هشدارها هنگام استفاده از Flexbox امروز Caveats when using Flexbox today

2. منوهای Flexbox 2. Flexbox-Powered Menus

• کاوش در چیدمانهای منوی معمول Exploring common menu layouts

• نشانه گذاری پنج نوع منو Marking up five types of menus

• با استفاده از Flexbox برای کنترل طرح منو تک سطح Using Flexbox to control single-level menu layout

• استفاده از Flexbox برای کنترل منوهای پیشرفته Using Flexbox to control advanced menus

• با استفاده از Flexbox برای کنترل منوهای چند سطحی با کشویی Using Flexbox to control multilevel menus with dropdowns

• ایجاد یک منوی رسانه های اجتماعی Creating a social media menu

• با استفاده از Flexbox برای کنترل چندین منو Using Flexbox to control multiple menus

3. چیدمان کارت پاسخگو 3. Responsive Card Layouts

• چالش هایی با طرح بندی کارت Challenges with card layouts

• علامت گذاری به کارتهای معمولی Marking up typical cards

• استفاده از Flexbox برای ایجاد شبکه کارت Using Flexbox to create a grid of cards

• اضافه کردن نقاط بازپرداخت پاسخگو Adding responsive breakpoints

• حل مشکل مشترک "لنگر کارت را پر نمی کند" Solving the common "anchor doesn't fill the card" problem

4. چیدمان مقدس Grail 4. Holy Grail Layout

• طرح گریل مقدس چیست؟ What is the holy grail layout?

• طرح بندی طرح مقدس در HTML Marking up the holy grail layout in HTML

• طرح بندی طرح مقدس با Flexbox Styling the holy grail layout with Flexbox

• تغییر طرح با Flexbox Changing the layout with Flexbox

5- کنترل کنترل به کاربر 5. Handing Control to the User

• کنترل کنترل به کاربر Handing control to the user

• تعویض موقعیت نوار کناری Sidebar position switching

• تغییر از سنگ قبر مقدس به نمایش عمودی Changing from holy grail to vertical display

• مخفی کردن و نشان دادن نوار کناری Hiding and showing the sidebar

• محتوای متحرک Animating content

6. قرار دادن آن همه با هم 6. Putting It All Together

• همه اش را بگذار کنار هم Putting it all together

مراحل بعدی Next steps

• متشکرم Thank you