It's such an incredible privilege to be here at the 10 anniversary off CSS con for you now.

I was here in Berlin at CSS Conference Jazz Con for the very first time in my life last year.

And it was one of the most amazing experiences off my life.

So I really want to thank the organizer's for bringing me out again and organizing this spectacular event.

Now I know.

I discovered from a colleague of mine Alexe Lakatos, somewhere in the audience that the death Tolls console can totally be styled up with CSS Case in point this glorious CSS only talk title in the console.

So my name is waging and I'm a developer advocate with next mole.

If you've never heard of us well, Alex built this coffee app that some of you will be using tomorrow to order coffee.

My colleague Gavin will also be speaking at James Caan were really friendly people and next moment does communications ap eyes and duke it just come Say hi if you got a minute right?

I'm also an avid lover of emojis And this these pretty much summer What?

Who I am as a person If you're curious about any one of them, you can ask me about them later.

And lastly, just to prove a point that Firefox supports the most CSS properties in the console.

I mean, it's vertical writing in the console, so I don't know about you, but I love it now.

When I started building stuff on the Web, I quickly realized that aligning stuff horizontally was way more easy than aligning stuff vertically.

And I started thinking about why that WAAS, now historically wet technology, started up from text document beginnings and a lot of the initial HTML tags and CSS properties focus mainly on text formatting for languages, you know, like English and French, that were laid out predominantly from horizontally from top to bottom.

So boxes on the Web and the Web is made up of boxes, right about us on the Web behaved very similarly, but that was clearly insufficient for what most designers and developers had in mind when it came to doing layout on the Web.

So when I refer to modern CSS layouts, I'm talking about layouts that are built with flex box with grid with the box alignment properties, because conceptually these other properties, which were crafted especially for doing layout on the Web.

They were very different from the prior techniques that we had, like, say, you know, html tables for layout or even floats because those were more clever uses of properties whose intended purpose was not for layout to begin with.

But resourceful developers like yourselves found plenty of work arounds and hats, too, what with whatever features were available at the time.

And today we have a much more robust tool set for doing layouts on the Web.

The first thing I want to cover today is content based sizing or what I call letting the browser do more.

Now the concept off automatic sizing has always existed on the Web.

I mean, browsers have always managed to figure out how much space content take up without any intervention from us.

The content just re flows without overlapping.

But what is introduced in this relatively newer see a suspect called CSS intrinsic an extrinsic module level three is that it introduce us some keywords that allow us to apply automatic with onto our elements on the page.

So now the sizing properties off with and height take in three additional key.

What values named the men content Max content and, hopefully, better support in the future.

Fit content.

So if we look at this first block off content here, I've sized them with men content, and I hope you can sort of see I'll just pull us up a bit.

Its size with Min content and men content is the smallest size that a box can take, which doesn't lead to overflow.

So in line content.

If I could point your direction here, you'll see that the online content will break into multiple lines, not line breaking has a lot more nuanced than most people give it credit for, because depending on the language that is being used on screen men, content is gonna end up looking very differently.

And the lines will break differently as well.

For a lot of languages, months, mostly the Latin based scripts like English or German line breaks will occur at word boundaries, where spaces or punctuation aren't used to explicitly separate the words.

One key thing to note is that the browser will not break words.

So in this instance, the word content plus the full stop at the end is treated as a single, unbreakable entity.

And that is that is why the this particular box size the with ends up being the this with off the content, plus the full stop.

But for languages like Chinese or Japanese, the line breaks is per character usually, but not always, because there's there are rules about certain characters that they were not allowed to start or end on a line.

And East Asian languages also use something known as a full with punctuation.

So let's say I add a comma here, so a full with punctuation will take up the amount of space as a standard Square Hon character.

So now the men content becomes two m's instead of one.

Now, there are also some eat Southeast Asian scripts like Bye, which do not have spaces between words.

So if you'll look at the second set of content that is sized with Max content and let's talk about Max content for a bit, Max content is a boxer's ideal size in a given access when there's unlimited space.

So usually what's gonna happen is that the content is gonna take up as much space as required to lay itself out on one line without breaking.

So if you look at the thigh sentence here, you'll notice that no spaces.

So if you don't read thigh and I don't know if anybody beats dying the audience, you probably wouldn't know where where the word's gonna break.

But the longest word in that sentence is priok right here.

And that's what ends up being the main content off this, a bi language block.

So now fit content.

If you can see here.

Unfortunately, it's not supported in the browser, because if you look at it, the inspector is going to tell you, Oh, hey, sorry, Invalid property value but fit content thus work in a great formatting context.

And so that's what we're going to be looking at with these last three pieces of content.

Now I've got three languages, and fit content is not a fixed value.

Like the previous two key words of men content and max content.

It is a range where the minimum value is men content, while the maximum value is either the max content value or the value that you put inside this function, whichever is smaller.

So this makes more sense if I show you what's going on now.

I think it's better to look at the second and third because they have exactly the same content.

So if I shift this and we run out of space, it's gonna shrink, shrink, shrink until it's the men content with for both.

But if we expend it, it will grow into.

So the value that I've used now here is 300 pixels, so it's going to be 300.

I know it's really, really small.

Take my word for it.

That's 300.

Same goes for the buy the guy content as well.

But if I change the content cap to something slightly larger, I'm gonna change it to 500 and then we'll grow some more.

You'll notice that it doesn't it doesn't reach 500.

It actually stops at the Mex content.

In this case, it's 462.

In this case, it's 320 something.

So that's how these three content based sizing values work.

Now.

The next thing I want to talk about is flex Box.

You know, the layout model where no one knows exactly the size of anything, but hopefully I can help shed some light on this apparent mystery.

Now, when we when we want to learn about flex box, Firefox really shines through because as of now it's the only browser that has a flex box inspector, so we can find it by going to the layout panel, and you can toggle it by clicking on this total.

Here, you can also choose toe click on this, uh, called it attack.

Maybe in the Inspector on what happens when we toggle it is that it will show you the outline of each of your flex items and any free space available as this kind of a texture thing.

And if we look at the layup panel, they also tell you the flex direction and the rap status.

But more importantly, the Flex back inspector will tell you what it does to flex items when they grow or shrink, and we'll cover this in more detail in the next couple off.

Examples.

And one thing I want to remind everyone is that the specifications actually recommends that we use key what values on flex items because they cover the most common use cases and they reset the values within the three flex flex properties appropriately so what's going to happen is that these key words initial none auto and a positive integer, which gets resolved to the flex growth factor.

So initial is the default value for flex items.

If, say, I said display flex on the parent and then I don't do anything to the Children.

It gets a value off display flex, and we can sort of figure out what the browser does when it encounters such key words by going to the computer tab.

And then you turn on browser styles because these are stars that the browser sets.

We never explicitly set them.

You can filter for flex, and what you'll find is that he'll tell you old flex growth factor.

Zero fleck shrink.

It's one flex basis is auto when the flex values initial.

If I change this to something else, let's say flex none right, which makes your flex items completely inflexible, and you go back to the computer tap will tell you that Oh, now flex goes your flex shrink is now also zero and auto and so on.

So this is pretty useful if you want to figure out what the browsers actually doing.

The exact algorithm that the browser uses to calculate flex item sizing is fairly complicated, but it is outlined in the specifications.

If you're interested now, I think sizing gets confusing until we get a clearer understanding of what's going on with the flex basis property specifically.

For example, if I put a fixed value of 100 pixels as the flex basis, it's not surprising that some people will expect to see a box off 100 pixels because we're very used to being in control of our sizing instructions.

But flex basis is actually the starting point from which the size of the box is calculated.

The key where key to remember here is the starting point, because if the flex item is allowed to grow or shrink, what are the final size?

Will not be, ah, 100 pixels.

So let's take a look at this next example.

It's a rather basic example, and if you just look at it on face value, it seems like the browsers allocating space very arbitrary, maybe based on content.

But so let's break down exactly what's happening.

So a reminder here is that remember, the browser doesn't break words, right?

So here we've got to flex containers, and both of them have display flex set on the parent container.

Nothing on the Children, which means they have a flex value of initial that resolves to 01 and auto zero means that it's not gonna grow beyond whatever space is required.

So this space it won't grow to fill up the space and won't go to fill up the space because the flex grow.

You don't know.

We do not allow the flex item to grow, but it does have a flex shrink value of one, which means that if there isn't enough space, all the items are going to start shrinking at the same rate.

So the moment I hit this with both the second and third items are going to start drinking.

So by the time I hit this, this sort of a layout that we saw just now you notice that the second item in the in the set has already shrunk.

But the one here has not shrunk it all.

And that's what that's the reason why, even though there's exactly the same content, the sizing is different now with a flex basis off auto.

What's going to happen is that this value resolves to content, which is an automatic size based on the content within the flex item, and typically this is equivalent to the max content size.

So when there's no explicit with set on a flex item and the flex basis is also set to auto, the browser is going to use the contents eyes as the starting point to calculate the width of the flex item.

But if you haven't explicit with set So I'm going to do that for this particular item, I'm gonna set a whiff of 200.

The with becomes the starting point for the for the calculation of the flex item and the Flex box Inspector will tell you this will tell you Oh, hey, based size 200.

But if I have an explicit flex basis set 01 300 this time, then the flex basis takes president trumps everything.

And now you'll tell you that Oh, the starting size now is 300 instead.

So that's basically how it works.

Now, if you look at this, the first column naturally cannot shrink anymore because, you know, that's the main content of word.

But if we shrink, both items will start to shrink together, but eventually because there's exactly the same amount of content in both both second items, they end up being the same men content at the end of the day and the next.

And the next bit I want to explain is the difference between a flex basis off auto and a flex basis of zero.

Because the this results in the size of your flex items behaving rather differently.

So now again, I have two sets of three items.

But this time they both they have the same content.

They match in content.

Both sets a flex items are allowed to grow and shrink, except that they get different grow factors.

So for the first item growth factors one the second item growth factors to third item growth factors zero same goes for the second set.

The distinction is that flex basis is auto For the first step, text basis is zero for the second set.

So what happens now is that the available free space is for the first set of items is calculated from the total with of the container minus the with off the content in all three items.

So this bit of space here and this bit of space here is the available free space, so this is easier to look at numbers in this instance.

So when I when we select this, it tells us that oh, some, the flex item has grown and it has grown by, say, about 71.5% pixels.

So there's some sub pixel rounding error, so it may not be exactly exactly, but, you know, 0.1 pixels.

I think it's fine.

So this is the first.

This is the amount of free space that the browser gave the first item.

If you look at the second item, it's about 142 143 so it's exactly double the amount of free space given.

But if you look at the final size, it's about 300 to 400 so it's they're not double of each other.

If you like the effect of having a flex item that is double of another, you'll have to set the flex basis to zero, which is what's gonna happen in this second set here.

When you set the flex basis to zero content, size is zero, so the amount of free space that the browser starts allocating is actually the with off all three the width of the total container minus.

Whatever men content with is for this particular third item, because that's the amount that's a small as it's going to get the browsers not going toe got not gonna break words.

So free space is calculated here, and all of this base is up for grabs.

So if you look at this, it the flexibility the flex grow is 300 about 314 and for the second item, it's 628.

So this is exactly double of the first item.

So if that's the effect you're looking for, you probably have to look out for your flex basis.

And that's that's something that I wanted to clarify Another.

Another useful thing with these new modern layouts is the ability to use box alignment, properties, toe a line items.

So again we're gonna turn on the flex overlay so we can see what's going on.

Turn it on and the flex box inspector again allows us to visualize the space, and how is the free space is distributed among the items, so box alignment properties were actually meant to be used across layout models, even though for now they're only applicable for flex and grit.

It's written in the speck that eventually formatting contexts can also use them.

So look out for something like this in the future.

Hopefully not my trick for remembering which properties apply to which access is that I personally I associate the word justify with, like text processing text editors like Microsoft Word, where they got those for icons in the toolbar and that use first to shift text around in the horizontal axis.