Flexbox (display: flex) offers lots of new options for aligning and distributing elements on a page. There are many great sites and references on the topic, such a Chris Coyier’s Complete Guide.
There’s often a lot of excitement surrounding new things, and web developers have been wowed by the new options offered by Flexbox. But it’s important to recognize that Flexbox has not replaced any of previously existing CSS tools. It has merely added some new tools to the kit. And most importantly, it’s not an all-purpose tool for page layout.
What is Flexbox for?
Essentially, the purpose of Flexbox is to provide options for arranging a series of elements on a page. These elements share a common container, set to display: flex. Think of a series of divs inside a container, or some lis in a ul.
There is often talk of doing whole page layouts with Flexbox, but this is a mistake. That’s not the purpose of Flexbox, and it’s not very good for that purpose. The key to getting the most out of Flexbox is to be clear on what it’s for.
Dealing with the Grid
For whole page layouts, we’ll soon be able to use the CSS grid layout module, which is an awesome layout module that seriously eats Flexbox for dinner in terms of page layout. I recommend you watch this presentation by Rachel Andrew, who is doing a great job of introducing us to this new module:
In the video, Rachel mentions her Grid by Example site, which is a great place to start learning about grid layouts.
Does this presentation excite you? I’ll admit that some of the stuff at the end was a bit over my head and will require some more viewings, but I’m pretty keen to get started with Grid layouts.
Yes-very exciting. When I was reading the spec drafts, I came across this (and several other features) that are extremely exciting.
I’m holding off on the learning of it though until it actually makes some headway into browsers.
I wish IE10 support was fully supported (heck even IE9) so I could use it in good conscience and put it on some of my sites. Pretty soon there will be very little that can’t be done in CSS!
One of the other things I’m excited about is float:positioned (think that’s the value) that’s coming up. Basically it will act like a float but it will take on the position/coordinate values you set! Float:bottoms replacement almost! Any placement will be able to be used and will be in the flow.
It looks very good but I still think it’s going to be a little too complex for most people. Flexbox also has the same problems and while they are both brilliant at what they do it comes at the cost of some complexity.
I realise that if you want to do complex things then you need a system that handles that complexity.
At the moment we can do 90% of what’s needed with simple tools such as display:table/table-cell. The only extra that I can see the grid layout brings to this is the ability to move content around - which is great but did we need a whole new grid layout module to do this?
I would have preferred to see colspan and rowspan implemented in CSS first.
I think the next couple of years will be interesting anyway and it will be good to see how flexbox gets taken up. It has support in all modern browsers but yet I don’t recollect seeing a single question in the forums about it. This probably means that those that are already using it are very proficient at what they do which brings me back to my first sentence above.
.