Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there's a bit of a learning curve. Trust me, though: you want to learn this. And once you have, you'll be singing its praises to anyone who will listen. I guarantee it.
01
قسمت 1
A Perfectly Centered Logo
Front-end designers have been joking about this for years. How again are you supposed to horizontally and vertically center a bit of content on the page? Before flexbox, it was kind of tough! No joke. Luckily, this is no longer the case. It's the eas...
02
قسمت 2
A Navigation Menu
For step two of your flexbox crash-course, we'll create a typical navigation menu, and then use flexbox to evenly distribute each item with perfect precision. View the source for this episode on GitHub.
03
قسمت 3
The Bread and Butter Layout
Consider the most typical of website layouts: a head at the top, a main section - possible consisting of a sidebar and primary content - in the middle, and then a footer stuck to the bottom. Traditionally, we've used floats to accomplish this layout....
04
قسمت 4
An Episode List
Let's use flexbox to design the layout for a very simple component that displays a list of episodes in a series. The key lesson for this video is to understand that flexbox is not exclusively for grids and layout. It's useful for even small adjustmen...
05
قسمت 5
Media Objects with Flexbox
A media object is an incredibly simple component that you'll find uses for in countless spots in a typical website. The most obvious example is a Facebook status: a user's thumbnail on the left, and possibly a name and message on the right. In this v...
06
قسمت 6
Flexible Grids in Seconds
Traditional CSS grids are painful to write. In fact, they're so painful to the point that most developers simply reach for a dedicated CSS framework that has all the kinks and bugs worked out. However, with flexbox, it's laughably simple. Seriously -...
07
قسمت 7
Sectioned Navigation
Let's build a navigation menu that requires main links on the left, social network links in the middle, and login/logout links on the far right side. Again, in the last, we would need to defer to awkward floats to accomplish this. But not anymore.
08
قسمت 8
Form Add-Ons
Imagine lining up a form input, icon, and button; it's really annoying, right? Every single time, it ends up being a confusing mess. "Wait, why is this padding not matching up with the inputs?" But, with flexbox, all of that is out the window. I feel...
این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.