 Good morning. Well, thank you Simon. I basically you spoiled the entire talk. It's okay Yeah, I'll be talking about Flexbox Just for fun. Let's see who has never done something with Flexbox yet cool Who started playing with it, but still doesn't believe it's ready for production and Then who is working with it regularly? Cool, so the last group it's this is supposed to be an introduction, so I hope I can still learn you something But the first two groups you'll be fine. We'll just tackle this one bit at a time First a little bit about myself. Like Simon said, I'm a WordPress developer and entrepreneur I'm mostly involved in Frontend developments and if you have any questions afterwards, of course you can come find me and ask those questions But it's such a huge conference. If you have any questions, and you can't find me, please look me up on Twitter It's by far the easiest way to get in touch with me This is our company, it's called Chef Duweb despite the name. We're very very Dutch and We started working with Flexbox About a year ago, I guess and for us it's changed The way we work quite a bit. It's very cool when a new tool can Basically alter the way you view life So I Wanted to start by giving a bit of the scope of this talk We're going to be talking mainly about CSS So this is the only slide I'll mention WordPress Obviously learning Flexbox is Beneficial to you even without knowing WordPress, but I hope everyone in this room knows why it's important that well functioning themes and responsive Responsive themes are important To understand Yeah, CSS is definitely awesome, but I'm going to argue that Flexbox is awesome We're going to be looking at three main things Regarding Flexbox and it's the three basic things that Flexbox does very well It's distribution of elements Alignment of elements and the ordering of elements and with elements. I mean divs and stuff like that, obviously It does all these three things with a Special nod towards responsive design so it was really built for the responsive web and That's because what we've been doing is Kind of weird if you think about it right now most of you use floats to get columns next to each other You clear those floats and you start a new row and that all works fine But it's kind of hacking CSS because that's not what floats were meant for floats were meant for Block items to get text beside them And if anybody mentions tables, I'll walk I'll walk out now one of the One of the things we've tried to to introduce to our workflows is is frameworks. So who here works with bootstrap? found foundation Inuit yeah, I've I've tried them all they all have the same problem in my opinion and that's this the the entire class structure It's not very semantic this Coal large for coal medium six. It doesn't tell me anything about what's inside that div and why it's important and If you think about it This is basically the same as inline styling right? I don't have to go to my CSS file to To change the look and feel of a diff. I have to go into my HTML So this is a big problem with the with the current frameworks and having a tool like flexbox to Really get your CSS into your CSS is It's pretty nice So the those were the big issues I have with the with the current state of Let's say regular CSS Now let's get to the good stuff I'll first start with a little bit of history because I feel it's important by under if you really want to understand flexbox. It's It's nice to know a bit of the history in 2009 The first spec was released It was called the the spec was called flexbox, but the display method was called box Everybody was on board Safari Chrome. I think you chrome didn't even exist then Firefox can anybody guess who wasn't on board? Yeah, so in 2011 Microsoft created their own spec thing Well display box isn't really very semantic. It's not very descriptive of what you're trying to do So they actually had a good point. They said let's call it display flexbox because that's much easier I mean, what's the difference between display box and display block, right? It's it's kind of crazy And now finally at this moment. Everybody's on the same page. Everybody's saying we're going for display flex and display flex has I'm going to do this live currently a market share of Yeah, there we go. Come on. Oh Geez, yeah It's currently a market share of 49% on 94. I'm sorry 94. So that's that's already a huge part of the internet, right? I I Nine and I eight obviously aren't on board. I 10 is if you use the right prefixes and stuff So I'll be getting back to that problem of I nine and I ate later seeing how you can Get around that First I'd like all of you to join me in a prayer towards the gods of code pen because now I'm going to do a little demo Let's see. Can you all see it? Do I need to zoom I can zoom there we go. So I have some HTML here. It's a it's just a row with four columns and The CSS involved is very basic. It's a regular display block row With four regular display block columns. They're all floating They're all they all have a width of 23 and a half percent They have a margin right of two and then the last column as a margin right of zero Making a full hundred well the big problem with this stuff Is basically is that it's not very not very flexible because if I add a column now Stuff bricks see if I I Take one out it doesn't break but it doesn't look as nice. So Obviously most of you had I've had troubles with with clients asking for a column to be removed if the site is already live or It can bring a whole lot of hassle and flexbox solves this quite handsomely Let me start by Putting a line items Flex start here. We'll get to that in a minute and then we'll say display flex on the row. So it's It's on the parents the the children are flex items the rows of flex box Obviously nothing changes because the width and the float are still in place, but if I just add flex one We have the same exact situation as we had before but now in flex box and Now if I add a column They'll just shrink If I remove a column It'll fill itself out So what does this flex one really mean? It basically says Skill me as much as the other elements in this flex box. So I've compared it to water It's it just looks at the pixels that are defined hard like our like our margin right of 2% and Substracts that from the entire width of the flex box and then divvies it up divvies it up among all the children And if I add a little class here featured Let's turn the background a bit black So you guys can see And if I turn the flex to two you'll see it just grows to twice the size of the other elements So we can have proportion proportions in this as well But that's not really the entire story flex one is just a shorthand version of three parameters Flex grow flex shrink and flex base Grow basically means I'm allowed to grow as much as the other elements shrink means I'm allowed to shrink as much as the other elements and Base is either a minimum width or a maximum width in this case. So let's see If I set flex grow to one flex shrink to zero and Say flex base to 100 pixels Nothing changes because my flex boxes are allowed to grow across the entire container But then there's still that hundred pixels declaration. So if I change the width of our row here You see stuff overflows. They have a minimum width of a hundred pixels If I switch these up and say flex grow zero flex shrink one and hundred pixels It'll act like a maximum width. So They'll just be smaller So that allows you for some very fine-grained control and you can use these tools to basically already starts Scaling stuff responsive Responsively with one line of code So a quick sum up Flex one means skill me as much as the other elements flex users smart scaling. So it just Gets the entire width that's available and divides it up between its children and Then we have gross shrink and base which use which you can use to get fine-grained control Now our second demo alignment. I'll take a sip prepare yourself because this is the one that usually Makes the jaws rub. Here we are I've added flex starts to align items and And that was an alignment thing flex We also have flex end Which means it'll jump to the bottom of the entire container and we also have flex center Who among you has had trouble aligning something vertically and CSS one two three everyone. Okay screams of terror yeah, this is how you do that and Let's see then the default of align items is stretch So it just stretches out the entire container now. How does this work? Basically flex box uses accesses to To align its items. So right now we have a flex box in like a row so a row of columns and It's main axis is a horizontal axis But it also has a secondary axis which in this case is the vertical one Align items allows you to align stuff on the secondary axis So if this was a column with all of the boxes stacked on top of each other the secondary axis would be horizontal Let's see Yeah, the default was flex stretch of a line item stretch and This even works if we have our featured column here And min heights, let's put it to 300 There we go. So one column Changes height and the others just just grow with it. There's nothing I have to do here There's no JavaScript. I need to run to check which one is the biggest and All that alignment stuff is taken care of right out of the box. Let me see I'll Get rid of this height and also Yeah line items like start Okay, so like I said, we have the secondary axis where we can align things on the vertical The vertical way we also have obviously the horizontal way and you do that with just a five content Just The default of which is flex starts It's just at the start of the of the entire flex box You also have flex and meaning a little jump to the end and then I think We also have center so perfectly aligned centered Objects and CSS are quite possible as you can see but I think the coolest one by far is space between Awesome, so now it'll just we don't even need the margin right anymore We can just remove that and flex box will do all the gutter calculations for us Okay If we now Put this to 23 and a half percent and remove our margins Now we actually have the same exact setup as we had before just completely flexible The thing is if I start adding columns now Stuff breaks again or rather it they shrink And it's over So how are we going to solve this issue? First of all, let's put shrink to zero Meaning that they'll actually be 23 and a half percent and then we can put flex flow on the parents and It'll just start a new row It's quite easy. So we we do not even need Row divs anymore that has anybody in PHP iterated through posts and Yeah started a row div Not necessary so Quick sum up alignment in flex boxes completely access based be aware that Accesses tend to differ when you have a column or row display mode Align items allows you to align stuff on the secondary axis and justify content allows you to align stuff on the main axis and With flex flow you get the power to basically add new rows as you go. So Your content can grow as big as you want CSS will have your back The third demo is actually the shortest because it's it's quite easy. It's ordering and Used to be that only in HTML you could like order a Column or get a get a column up front Right now you can just do that with flex box saying order minus one and it'll jump to the top of the stack um This needs a little side note though because orders by far the biggest bug nest in In flex box itself. I think the guys from Yoast found a bug with a numbered list where the numbers didn't change but the location of a list did stuff like Column first of type Doesn't really work anymore. I mean if I set the background to blue now The actual first column will get a blue column. So keep that in mind when you're using order It can be very handy, especially when you're making a Responsive layout and you need certain content to be more available At the top on a mobile screen So the other property is quite simple you can You can check that out yourselves. I Told you I was going to Talk a bit about how we handle IE 9 and IE 10 So this is more of the the practical stuff One of the things We need to take into account is that flex box has had three different specs over a period of ten years So this is going to be prefix hell This is just one declaration flex box and it's seven lines of code. I mean a regular normal Flexbox container. I mean this scrolls. Look at this. I'm I'm never going to type this, right? so We do need to look into some auto prefixing solutions for this Who among you is using a CSS preprocessor like sass or less Okay, that's the the vast majority awesome keep up the good work You guys mainly have to don't have to do anything. There's an auto prefix are available for sass and less and if you're using like a Framework like bourbon or compass. It'll do all that stuff for you if you're Writing regular CSS have a look at grunt or gulp. They can help you how to prefix these These lines of flex box and The way we handle IE 9 Like Simon said I own a company so we need to to dance to the client's wishes obviously, but Mainly what we do is we sit the client down and we tell them this is a new technology We want to work with this. We can be a lot quicker. It'll be a lot cheaper for you If you do need that IE 9 and IE 10 support We can definitely do that, but it'll just cost more and One of the things most clients will say is okay, we totally get it. Don't worry what don't worry about it I mean, it's once you explain to them that they're pouring money into a dying platform. They'll They'll be they'll be okay about it There's usually one group of clients that Demands IE 9 support and that's like local government But they know about this stuff. They usually have the budgets for this stuff and they can They can definitely pay more at least they're willing to pay more so You really have no excuse anymore. It's 94% of the web is already using this you can start using this now. I hope everyone is blown away by What the flexibility that Flexbox offers and I hope you'll have nicer bike rides to the office without the dread of client client stuff Okay, I've added some further reading to these slides. I'll Share these slides online Some the Flexbox guide by CSS tricks is very very excellent. It's a very clear Very clear explanation and because I didn't I didn't even Deal with dealt with like 10% of the of the entire specters way more out there Another cool thing is Flexbox froggy. You can learn Flexbox by playing playing a game You need to get the little frog on to the little lily pad using Flexbox very awesome, especially the last last level Sincerely difficult So, thank you