What the FlexBox? – A free 20 video course to learn CSS Flexbox

Is flexbox hard to learn? Yes, but it's because it's such a powerful layout tool. There are tons of gripes about Flexbox, but I've found that if you just put in a few hours to learn it, you are going to be way ahead in your CSS and layout game.

We haven't had to learn anything hard in CSS for years and now it's time. Hunker down and get at it!

The core of flexbox, and the most powerful and commonly used parts, isn't that much material, and isn't very hard to learn. But there's a long tail of corner cases and tricks and special situations.

There's one other reason too: flexbox is at it's most powerful and most simple, IMO, when you put flexboxes inside other flexboxes. But that inherently mixes markup and styling. Some of flexbox' features are designed to help you avoid mixing markup and styling, but that adds to the complexity.

CSS is somewhere between inherently complicated and a broken mess. That's not the most charitable way to put it, but not entirely inaccurate either.

If you start to learn the older tools to do page layout, you can learn each one a bit faster (float, positioning, display properties), but combined they do NOT form a consistent logical system of page layout. Your learning is just repetition to see what works, Googling of CSS tricks and then hopefully you develop some intuition about when to use which property to achieve your desired effect. This confusion is why Flexbox is a net positive comparatively.

With flexbox you can know what elements will do when you apply a CSS property pretty assuredly (well, if not now, in the near future). Without, it's a bit more learn by error. Flexbox is a brighter future.

Flexbox is actually relatively simple for the common use cases (absolute centering, distributing leftover space between elements etc).

If you have more complicated layouts, there's a lot more to the Flexbox spec that will help you out.

It's not a fact.

Nor is it a fact that to access videos on the web requires an email address! In both cases the author has chosen to do this for whatever reason.

The thing about layout styles for CSS that people seem to miss is that you don't have to choose a single one one. You can mix floats in one area of the DOM with Flexbox in another area and Grids (once they're ready) in yet another area, and they'll work well – provided they're properly siloed – because they're mostly targeted at solving different issues, layout-wise.

I mean https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally just gives you what you need in a skim-readable page.

I haven't watched the videos but it seems strange that there are 20 of them.

Most basic HTML courses are around 20-25 parts. That does not mean HTML is rocket science, or a broken mess.

I've been using it, it's cool and all, solves some common CSS issues, but it comes with its own set of problems. For starters, it's a whole new set of browser incompatibilities that you have to learn [1], some of them render flexbox almost useless [2]. Additionally, IMHO, it's model is leaky; leaky in the sense that the it relies on DOM structure - a `display: flex` element will do it's thing by affecting the direct child elements. This means that a) if your component is wrapped by another component, you'll have a hard time predicting how it will be laid out/isolating the behavior; and b) if, by some reason (e.g. using Angular directives) a wrapper is added between the `display: flex` and the flex item elements, the layout will be lost.

[1] https://github.com/philipwalton/flexbugs

[2] https://code.google.com/p/chromium/issues/detail?id=346275

Listened to @_lemonmade & @snookca at a recent conference talk about how they're using Flexbox across the Shopify platform and there is no reason why other far-reaching platforms shouldn't make the switch today.

Some people don't have that luxury, but for the rest of us Flexbox is ready to be used.

If you use flexbox as an enhancement, to get really good alignment of UI elements for example, then you can often take advantage of it to make the experience really great in newer browsers while not locking out old ones.

I would suggest taking a look at Zoe M. Gillenwater's talk. She works for Booking.com. Are they locking out old IE users? Of course not. So she demonstrates how to enhance responsiveness with flexbox. https://www.youtube.com/watch?v=_98SE8WUvLk

It does depend on your target market, but then, so does everything.

    .container { position: relative; }
    .thumbnail { position: absolute; margin: auto 0; width: w; height: h; margin: auto 0; top: 0; right: 0; bottom: 0; left: 0; }
    .summary { padding-left: w; min-height: h; }

    .container { display: flex; }
    .thumbnail { align-self: center; }