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.
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...
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.
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....
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...
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...
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 -...
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.
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...
این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.