On Friday September 30th I was lucky enough to be included in the lineup for Frontend North in Sheffield. For those fo you that don’t know what Frontend North is, it is a full day conference held in Sheffield full of frontend goodness! Full details can be found on their website here: http://frontendnorth.com/
I spoke about some of the basics of Flexbox and how awesome it is during the first session of lightning talks (which I have to say, I was relieved about as it got it out of the way so I could enjoy the rest of the day).
It was a really very awesome day. I’m immensely honoured to have been invited to speak and I learnt absolutely loads. A huge thank you to Kimb, Dave and Matt for organising it.
There will be a blog post coming soon outlining some of the tips and tricks I picked up but in the interim, here are the slides from my talk and also the rough transcript for you all. I hope you enjoy it 🙂
Thanks to @shaunbellis for the photograph
I’m going to talk to you a little bit about Flexbox today. As front end developers, I’m sure we’ve all come across it by now, but I think its not always obvious what you can do with it. therefore, I want to take through a few of the basics and show you a couple of *real world* examples where you can actually use it.
Giving lots of code examples can be a bit dry, normally I would rely on numerous pictures of Spongebob Squarepants to break it up a bit. Like this one:
Or I would use funny animated gifs to keep peoples attention from wandering, like this one:
But because this talk is a little bit more technical than I would normally deliver, I’m not going to do any of that. Instead I‘m going to explain Flexbox through the medium of Arnold Schwarzenneger movies.
All with very tenuous links to the subject…
First, A little bit of history…
Before CSS3 we had these 4 layout modes. The introduction of CSS3 gave us two new layout modes as well.
Grid which is tantalisingly close but still not quite ready yet and Flexbox.
So, what actually is Flexbox?
Well, it pretty much does what it says on the tin. It gives a container the ability to alter the width / height and order of items inside it to best fit the space available no matter the device.
But why do we need this?
Show of hands? How many people build front end systems for use with a CMS?
And how many of you have built your shiny new websites and everything looks lovely, right up until the client decides to add 5 times more content than the original design allowed for and broken the layout simply because they have the flexibility to do so in the CMS?
This is where Flex box is really powerful. It gives you a lot of control over your designs and layout when the content used cannot be absolutely constrained.
YAY! – drink
So lets go through a few basics…
With flex box you can control both the container and child elements.
Here we have a simple container element with four divs inside it.
Straight away we can change the direction of the items from a row to a column simply by adding flex-direction: column to the outer container,
We can also manipulate the items order by giving a specific number to each item. Here you can see the order has changed 4, 3, 1 and 2 last.
We can control the widths of each item by using flex-grow and flex-shrink. This example uses flex-grow. Items 1 – 3 have flex-grow:1, item 4 has flex:4 making it 4 times wider than the other three. If we set all items to flex 1 then we get equal width columns.
We can even control the spacing around the elements using row wrap and justify content on the container to make sure that if we have more items than can fit on a row there are…
no more orphans…
Let the games begin..
So I’ve rattle through some of the basics there, I could talk about this all day, but as this talk is only supposed to be 10 minutes long, I’m going to limit my examples to one scenario I come across on almost daily basis. Most of the time I find myself playing with flex box is when I’m working on menu systems.
I currently work on a lot of large e-commerce websites with complicated category structures and often at least one promo area that is controlled through a CMS. One common issue I often come up against is needing to create equal height columns.
I’m sure we all know the issue, a designer has given us a lovely design for a menu where all of the columns are equal height and width. Once upon a time this would have been difficult to do and make responsive.
Breaking it into 5 columns and floating them almost works but you won’t get all of the headings to match up.
We could instead float each <ul> but still its not quite right… We need to preserve those gaps and create equal height columns.
Simply adding display: flex to the container gives us equal heights. If we were then to use flex: 1 (remember flex-grow and flex-shrink – this is a shorthand) we also get equal widths with no need to set specific pixel widths. A much nicer way to adapt to different viewports.
Another common issue with menu systems is changing flow and reordering items, if we have a large desktop menu set to display horizontally it would take a reasonable amount of code to change it’s orientation for mobile using display:block and floats etc.
As discussed earlier, with flexbox we just need to flex-direction: column to our container up until a max-width of, say, 50 em. If we also had a promo box in the first column of a desktop menu, we wouldn’t really want that at the top of the mobile menu.
By setting the order to 5 on mobile but then moving it to 1 on 50em break point would move it to the bottom for mobile devices but retain its position on larger screens.
Ok so far I’ve made Flexbox sound a lot like magic. It is awesome but it does have some caveats… Like anything there are a few “flex bugs”, you can find a complete list as well as known workarounds on the flex bugs github page by following the link on screen.
Browser support is now at 82.3% without needing any prefixes, if you can easily check which browsers are supported on the can i use website.
If you do want to use prefixes as well and use something like as grunt or gulp in your workflow I would recommend postcss that includes the awesome autoprefixer.
Alternatively you could use @supports, and I definitely recommend checking out Rachel Andrew’s codepen using that.
If you want to away and do some more research, here is some further reading for you. I’ll post my slides online afterwards so you can grab all of these links.
And to conclude, I think you will agree, FLEXBOX is the Boss !!
Thanks for listening and Happy Coding!