As someone who has little direct experience with this part of webdev (other than aligning paragraphs once in a while for really basic static text sites), I have to wonder: is the fact that flexbox requires a 20-part video course a sign of it being:
- a broken mess,
- a less broken mess than what came before it,
- an inevitable consequence of trying to solve an inherently difficult and complicated problem?
- some combination of the above?
Either way, nice of Wes Bos to provide such a tutorial, will have a look.
Author here - it's just 20 videos broken apart into each topic so when you need to come back to reference something, it's quick.
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!
I cant speak to these videos, but most flexbox tutorials are quite long. The number of videos may be a sign of completeness.
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.
It me took about 15 minutes of reading an article to get a basic understanding and start using some basic functionality. I'd imagine the 20 videos explore every crevice of Flexbox, which you don't necessarily need to start using it.
Dynamic layout is a hard problem. I've never come across a layout engine that didn't require at least a day to get comfortable with. Some may have the advantage of being similar to something you've used before and might give you a head start but that can also slow you down when you assumed it's exactly like the other when it's not.
If you want to see a completely different approach to dynamic layout that makes more sense, check out the constraint system in the 2D sketch system of Autodesk Inventor. It's all visual, controlled through a GUI; you select two points or two lines or a point and line and apply constraints such as "coincident" or "perpendicular" or "parallel" or "tangent". You can also give things explicit dimensions, which may be computed from other dimensions. The GUI stops you if you try to insert incompatible constraints. You can put in text, too, so you can actually use it as a layout engine. There's no notion of "line break", though; it won't change the number of things in a row if you change the outer bounding width.
This is much more comfortable for designers than trying to do it through a set of declarations with no consistency checking. A constraint engine really is the right tool for the job. It also maps well to a GUI, which CSS does not.
The constraint system isn't limited to horizontal and vertical. You can have circles, arcs, and even splines. Graphic designers would love to have such capabilities in web design.
I don't know about Flexbox, but I never saw easy and powerful layout libraries. They can be easy, but with very basic capabilities (Delphi 7) or they can do almost anything, but with a lot of concepts and complex API (Java Swing, Java FX, Cocoa, Qt, HTML positioning in general). I guess, that efficient layouting is just not a simple problem.
I don't think that you should be in the habit of making technical decisions based on the number of videos or something. Take 1.5 minutes to read a web page on flex box and realize that it consists of putting boxes into boxes, deciding the alignment and how much space they will take up.
I haven't watched the videos but it seems strange that there are 20 of them.
As someone who pushes pixels around every day for a living – among other things, of course – I'd say option 3.
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.
Flexbox takes a few hours of work to learn, as others here have said. However, once you learn it, you have a logically sensible system of layout. It's worth the time. As far as it's quirks go, that's because it was slow to be standardized, so there is outdated info out there.
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.
It's just web developers who lived in a world where front-end layout was supposed to be hard and who distill complexity out of four or five trivial CSS properties to convince themselves that all of the hours they lost aligning divs with floats or bootstrap weren't pointless, and that the new way must be as complicated.
Every time I finally resolve to start doing some Web Front-end stuff, I have the same reasoning as you put forth ... and I go back to coding my frontend in wxPython. I just don't know where to start, and nothing seems to last more than a few weeks until a shinier thing pops up... I need help!
Access to the web page you were trying to visit has been blocked in accordance with company policy. Please contact your system administrator if you believe this is in error.
I really love this site, it's a great quick intro to Flexbox. Kudos to whoever is hosting it here now (from my understanding the original author stopped hosting it some time ago).
Thats been my goto reference for most of my layout needs. I've also found https://philipwalton.github.io/solved-by-flexbox/ useful. Props to all the great authors (including OP) for these -- flexbox + great tutorials has greatly improved my web dev experience.
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.
The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go.
Come back in five years when IE 11 is a distant memory and Edge is popular.
There's plenty of cases (especially in the enterprise, where requirements can be tightly controlled) when non-Edge versions of IE can be safely dropped. I'm working on such a project right now, we use flexbox very extensively.
Actually, if IE 10+ is the target for my site, I would totally use FlexBox. The list of workarounds is far shorter than CSS headaches used to be. Remember the terrible IE on Mac days? ;-)
We're developing a desktop-like single page application, so our testing on mobile is very limited. But I don't see any major issues on the few devices that we have, and caniuse.com confirms that problems are not anticipated (at least with some autoprefixing).
Its not horribly broken, IE11/10 is well supported with prefixes & past flexbox-spec properties. Autoprefixer does all the work there. For IE9/8 you could rely on polyfills like https://github.com/10up/flexibility
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.
One of the web's greatest features is progressive enhancement. So you can (and in my opinion should) use flexbox now as it has pretty decent browser support -- just make sure there is a decent fallback to something that is not-as-visually-perfect-but-still-decent (such as ye old float-based layout or display:table).
Doesn't that negate the point of flexbox which is that it's better and easier for building interfaces? If you have to build it in flexbox then build it again in floats, why build it in flexbox at all?
Good point, and I'm not sure how to articulate this (which might mean I have some reconsideration to do)... but I feel like I don't need to sweat the details as much on the fallback? Like, if it looks perfect with flexbox and decent-but-not-perfect (but critically, the content is available and readable/accessible) with the fallback, I'm totally ok with that.
Depends a lot on your needs. For my company, we don't give a shit about people on old browsers. They make up an incredibly small % of the visitors to our customer's sites and we've never once had a client ask for IE9 support or anything like that. We go with the most recent version, and one prior, and that has served us well. Never received a complaint from a client about a customer of theirs not being able to do something on a site.
Some people don't have that luxury, but for the rest of us Flexbox is ready to be used.
I've been using Flexbox more and more these days. If I need to support older browsers I use it for progressive enhancement, and test heavily. There's a lot of things it can do that are simply impossible in other layout modes, and for these I find it super useful, and I just have everything fall back to other layout modes for older browsers.
That isn't the case. Firstly, you need to take a look at the browser stats for the site that you are working on. It may be that in your case you have a very high percentage of old IE users, and so for you, flexbox isn't an option. Even then though, you may be surprised.
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 is also worth remembering that flexbox was never designed for complete layouts. It's designed for one-dimensional layout. UI elements such as forms fields, navigation, sets of "card" etc. You run into a whole bunch of issues if you see it as the holy grail for layout, because you are using the tool for something it wasn't designed for.
As I said above in a post, in my opinion Flexbox is win, it's an attempt to create a logically consistent tool for layout, vs the comparative hackery of combining float/position/display/margin to achieve your desired layout. Is it perfect? I doubt that, but it's definitely a step towards CSS being less broken.
Well, I would say that vertically centering a thumbnail to the left of a block of text would certainly be easier with flex box. My previous solution would have been:
I think flexbox is a great tool. I spent some time learning and using it, but I found it hard to remember the names of the different properties. I created http://flexbox.help as an easy way to remember and check their effects.
I recognize the effort put into these videos, and admire it. A few videos in, and the approach is pretty good—split flexbox into small chunks for those who learn best that way.
Sadly, the frequent mispronunciation of words quickly becomes distracting. Axis pronounced as "access", axes called "axises", i think I even heard "ek cetera". By the third video, I think I heard these mistakes at least a dozen times. That totally kills being able to listen. Perhaps it's worth redoing the voice over. As it stands, I'd rather read a text guide.
64 comments
[ 3.8 ms ] story [ 128 ms ] thread- a broken mess,
- a less broken mess than what came before it,
- an inevitable consequence of trying to solve an inherently difficult and complicated problem?
- some combination of the above?
Either way, nice of Wes Bos to provide such a tutorial, will have a look.
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!
Or is there more to learn?
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.
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.
I mean https://css-tricks.com/snippets/css/a-guide-to-flexbox/ literally just gives you what you need in a skim-readable page.
This is much more comfortable for designers than trying to do it through a set of declarations with no consistency checking. A constraint engine really is the right tool for the job. It also maps well to a GUI, which CSS does not.
The constraint system isn't limited to horizontal and vertical. You can have circles, arcs, and even splines. Graphic designers would love to have such capabilities in web design.
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.
I haven't watched the videos but it seems strange that there are 20 of them.
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.
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.
Most basic HTML courses are around 20-25 parts. That does not mean HTML is rocket science, or a broken mess.
Access to the web page you were trying to visit has been blocked in accordance with company policy. Please contact your system administrator if you believe this is in error.
URL: flexboxfroggy.com/
Category: malware-sites
(tip: visit with a computer not a phone)
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
http://caniuse.com/#feat=flexbox
The TL;DR: Everyone is doing well except IE which is horribly broken. Only Microsoft's Edge browser has good Flexbox support, but nobody uses Edge, so therefore Flexbox is still no-go.
Come back in five years when IE 11 is a distant memory and Edge is popular.
For public web-sites it is still non-viable. Broken versions of IE make up too large of a % of users.
I am considering flexbox but have to worry about supporting above. Luckily we don't have legacy IE to worry about so am hopeful.
according to this [0] ie 10 and 11 are supported but with "partial support"?
[0] http://caniuse.com/#feat=flexbox
One bug used to affect non-IE browsers but should now be fixed in all but Safari.
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.
It does depend on your target market, but then, so does everything.
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
Sadly, the frequent mispronunciation of words quickly becomes distracting. Axis pronounced as "access", axes called "axises", i think I even heard "ek cetera". By the third video, I think I heard these mistakes at least a dozen times. That totally kills being able to listen. Perhaps it's worth redoing the voice over. As it stands, I'd rather read a text guide.