در این آموزش تصویری با پیاده سازی طرح بندی واکنشگرا با CSS Flexbox آشنا می شوید.
این دوره آموزشی محصول موسسه Lynda است.

سرفصل های دوره:

  • Flexbox چیست؟
  • استفاده از Flexbox
  • کار با منوهای Flexbox
  • بررسی طرح بندی منو
  • استفاده از Flexbox برای کنترل منوها
  • استفاده از Flexbox برای کنترل منوهای چند سطحی
  • استفاده از Flexbox برای کنترل منوهای متعدد
  • استفاده از Flexbox برای ایجاد شبکه
  • کار با HTML
  • یک ظاهر طراحی شده با Flexbox
  • تغییر چیدمان با Flexbox
  • تعویض موقعیت نوار لغزان
  • پنهان کردن و نشان دادن نوار لغزان
  • و…

عنوان دوره: Lynda Advanced Responsive Layouts with CSS Flexbox
سطح: متوسط
مدت زمان: 1 ساعت و 49 دقیقه
نویسنده: Morten Rand-Hendriksen


The CSS Flexible Box Layout module (aka Flexbox) provides a simple solution to many of the design and layout problems web designers and developers have faced since the advent of CSS. Now that the module is becoming ready for the main stage, it's time to look at what we can do with it.
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
Topics include:
Creating Flexbox-powered menus
Building a responsive card layout
Marking up and styling the holy grail layout
Changing displays
Showing and hiding the sidebar
Animating content

4m 26s
1m 22s
How to use the exercise files
3m 4s
1. What Is Flexbox?
4m 51s
What is Flexbox?
2m 8s
Caveats when using Flexbox today
2m 43s
2. Flexbox-Powered Menus
34m 55s
Exploring common menu layouts
1m 28s
Marking up five types of menus
4m 53s
Using Flexbox to control single-level menu layout
7m 22s
Using Flexbox to control advanced menus
6m 51s
Using Flexbox to control multilevel menus with dropdowns
6m 25s
Creating a social media menu
3m 18s
Using Flexbox to control multiple menus
4m 38s
3. Responsive Card Layouts
18m 12s
Challenges with card layouts
3m 48s
Marking up typical cards
2m 14s
Using Flexbox to create a grid of cards
5m 6s
Adding responsive breakpoints
4m 9s
Solving the common "anchor doesn't fill the card" problem
2m 55s
4. Holy Grail Layout
15m 13s
What is the holy grail layout?
3m 32s
Marking up the holy grail layout in HTML
2m 39s
Styling the holy grail layout with Flexbox
5m 33s
Changing the layout with Flexbox
3m 29s
5. Handing Control to the User
21m 31s
Handing control to the user
2m 34s
Sidebar position switching
4m 23s
Changing from holy grail to vertical display
3m 52s
Hiding and showing the sidebar
4m 40s
Animating content
6m 2s
6. Putting It All Together
8m 18s
Putting it all together
8m 18s
Next steps
1m 46s
Thank you
1m 46s

حجم فایل: 353MB