ویو جی اس

آموزش Flexbox بامثال

Learn Flexbox Through Examples

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.

سطح متوسط 8 جلسه آموزشی 01:12:00 ساعت
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...

دوره در حال اجرا

این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.