The CSS Display Property is Changing Forever

Key Takeaways

Even if you just got started with CSS, you've probably used the display property before. But did you know the display property actually takes two values, not just one? And that there's over 20 unique display values that you can use? There's so much more than just inline, block, grid, flex, and none, which is what pretty much everyone uses. These other properties are incredibly useful, and being able to use two different values for display is also incredibly useful because it allows you to do things that are almost impossible otherwise. In this video, I want to go over some of those unique things about the display property most people don't talk about, and show you why they're incredibly useful. Welcome back to Web Dev Simplified. My name is Kyle, and my job is to simplify the web so you can start building your dream projects sooner. And in order to actually understand how all these different display properties work, especially multi-value display properties, we first need to understand kind of the evolution of how the display property came to be. Originally, the display property pretty much only had a few things you could do. You could define something as a display of block, divs by default are block display, and that would essentially fill the entire width. You could define something as inline, and it would just fill up as much width as it possibly needed. And then you could kind of do this weird hybrid approach, where you could define something as both inline and block at the exact same time. And really, all this allowed you to do is have something work exactly the same as inline, but now you could do things like add padding on the top, and that would actually work. For example, here, padding of 10 pixels works, but if I move that to my inline element, you can see that it doesn't actually quite work as we expected to. This becomes even more apparent when we try to define something like height on this element. If I just say height 100 pixels, you can see it doesn't change anything at all. While when I come down here and I add a height of 100 pixels, you can see it drastically changes this element. So inline block just allowed you to do more things in the Y and X direction when you're modifying the size and so on of certain elements. We also have the ability to obviously hide things by just coming in here with a display of none. And that was pretty much the extent of all the display property could do for the most part. Then came along the idea of using the display property to change how the children of elements worked as well. So, instead of just being able to define what an element looks like, you could define what its children look like by using something like flex or grid to actually lay out children. So, for example, we could just come in here with the display of flex, and now we're modifying how the actual children of this wrapper content are laid out. So, I just have three divs before, middle, after wrapped inside this wrapper, and since I applied the flex layout to this wrapper, now my contents inside of this wrapper are using their own layout. So, we kind of have two different things the display property is doing. It's both defining what an element itself is displayed as, as well as what the children of that element are displayed as. These are kind of two different parts. And before the display property was able to take two separate values, we kind of had to choose one or the other. Do we want to determine what this displays as its children, or do we want to determine what it displays like for itself? And in order to get around this limitation, CSS actually added in multiple combination properties. For example, we have inline flex, which allows us to just have a flex container that is also inline. So, normally if you do flex, it is going to be more of a box style, and we have the ability to do inline flex if we want it to be inline. Same thing with grid, we have the ability to do inline grids as well. Now, these are things that you're probably not going to see very often, but they are there because in certain scenarios, you need to have a flex container be inline, or you need a grid to be inline and so on. We even have inline block here, which is kind of combining together multiple different things. Well, CSS kind of got around and they're like, "Okay, this is a little bit confusing, and as we add more and more display properties, it's going to become really complicated to be able to have all these different combination selectors." So, instead they broke apart the display into two separate properties. And these two separate properties allow you to define, "Okay, what is my element going to look like itself? Is it going to be display block? Going to be display inline? And then I want to determine how the children inside this element are displayed. Are they flex children? Are they grid? Are they standard? How is this going to be laid out?" So, if you pass two separate values to display, the very first value is going to determine how you lay out the particular element itself. So, is this a block level element? Is this an inline element and so on. Then, if you want to pass in a second value, that's going to determine how do you want to layout the children inside this. So, for example, if I wanted an inline flex container using the new display way of doing things, I would say inline and flex as two separate values. And now we have an inline flex container. And to show you that this is inline, I'll just come in here and add a span with some text inside of it. It'll just say test and you can see these both show up on the exact same line. Well, if I change this from inline to block, now my block level wrapper element is on its own line because block level elements take up their entire own line. So, that is the new way of doing things inside of CSS. And this gives you the ultimate amount of flexibility. For example, I could say that I wanted this to be an inline grid and now I have a grid that is directly in line with my test. And I'm like, "Oh, you know what? Actually, let's make that a block element." Now we have it as a block level element. Now, if you just define a single property inside of CSS, it's going to do a fallback for you. So, for example, if you define just grid or just flex, essentially you define only the second part of the word, it's going to default the first portion of your display to block always. So, if you define your second part but not your first part, it's going to default to a block level layout. Now, if you define the first portion, but you don't define the second portion, it's going to default your second portion to flow. And essentially a display of flow means it's going to use the standard layout of using block elements and inline elements. So, just like normal CSS that you're used to, imagine there's no flexbox or grid, it's just going to use that normal document flow. So, if we give that a quick save, you can see everything inside of here is laid out just like it was before. Everything is just in that normal document flow. Now, you may have noticed when I was typing out the word flow that there's this value called flow root. And the flow root is very similar to flow, but it creates something special called a block formatting context. Now, you don't need to understand exactly what that is because there's a lot of things that create it and there's only three things that a block formatting context actually does. Two of them deal with floats. It makes sure you can't float elements outside of it, and elements that are outside of it can't float into it. Honestly, it doesn't really matter cuz you're probably never going to use floats. But, the other thing that's important about this is it prevents you from having margins that collapse. So, let me show you what I'm talking about. On my before element, I'm going to put a margin on the bottom of 10 pixels. Actually, let's make it quite large. We'll say 50 pixels. And then on my middle element, I'm also going to put a margin on the top here. Margin top, and this is going to be 50 pixels as well. Now, the last thing I need to do is just change this to a block level element, and you'll notice that even though there's 50 pixels of margin on the bottom of this and on the top of this, I still only have 50 pixels of space between these two. I can even reduce this down to 10 pixels, and you'll see that it doesn't actually change my spacing cuz it's using whatever is the greater of these two values to space these different elements out. Let's just change them both to be 20 pixels, so we have exactly 20 pixels of space between them. And now I'm going to show you how creating a new block formatting context can remove this margin collapsing. All I need to do is take an element that I want to create a context around. We'll just wrap it inside of a simple div here. And all I'm going to do on that div, I'm going to add a simple style that is going to be a display property. And for this display property, let's just say it's going to be a display of block. And we're going to use a flow root here because a flow root creates that new block formatting context. Now, if I save this, you'll notice immediately both these margins are being respected. For example, if I change this to 30, you can see it spaces them out. And if I change this to 30, again it spaces them back out from each other. So, it's now respecting both of these different margins, and they're no longer collapsing inside of each other. This is something that you may have actually run into if you use, for example, display of flex. So, if I change this to be a flex-based display, which by default is technically a block flex display, you'll notice I actually get the exact same result. And that's because flexbox and grid both create their own block formatting context. So, if you've ever worked with flexbox and grid, and you've wondered why your margins are changing things around when you move something from block to flex, that's because of this block formatting context that's being created, which essentially prevents your margins from collapsing. So, understanding that you can use this flow-root version to prevent those margin collapsing is somewhat important, but it's not something you're probably going to use all the time. Generally, this value is probably going to be something like flex or it's going to be grid. And those are probably the two most common use cases you'll see. Now, while we're on the topic of flexbox and grid, I want to go ahead and I'm going to create a grid layout here. And again, this is going to default to a block grid if I don't define the block. And we'll just come in here with some grid template columns and we're going to say that we're going to have two columns. So, we're going to have an auto and an auto. Actually, let's just make them 1 fr and 1 fr. So, now we have two separate columns showing up for all of our elements. We're going to remove all the margin and display properties from here cuz they don't matter. We're just going to keep the colors. And as you can see, we have all of our different block or element showing up. We have two separate columns for all of these. And I'm going to again get rid of this so we have all of our elements just like that. I'm going to add a couple more elements inside of here just so we have multiple different after elements inside of here. And I'll name this one middle just so we have slightly different colors. I'll just do before. There we go. So, we have all of our different colors kind of showing up inside of this different element. And what I'm going to do is I'm going to wrap a few of them inside of a div because maybe I want to add like a hover effect. So, if I hover over any of these three, I want to do something. So, we could really easily do that by just adding a class called hover. And we'll just say .hover And whenever we hover over it, I'll change the opacity to like .5. So, now if I hover over any of these three elements, you can see my opacity changes to .5. Really common use case where you want to have a specific hover style applied to multiple elements inside of a flexbox or grid container. But, you'll notice immediately, these elements are no longer laid out in my 2 by 2 grid. And that's because they're wrapped in a div. And grid and flexbox, they only affect the elements directly inside them. So, they affect this before div, they affect this hover div, and then this middle div right here. And these elements are nested one level deeper, so they're not at all affected. Now, this is something that's really difficult to work around because essentially, the only way to get around this is to take all of these elements and move them outside of our hover div so they go back into the normal layout. But, we want them to be wrapped in this other div. And this is where the new display property of contents comes in. I can change this here to have a display. And this display is going to be contents, just like that, one single word. And this is actually a value where you can only specify one single word. Same thing with none. There's no such thing as a block none. It's just none and nothing else. Same thing with contents, you can only specify it as contents. Now, if I save, you'll notice immediately on the right-hand side my grid is back to exactly how it was before. And that's because when you use a display of contents, essentially what CSS and HTML is doing is it's pretending that this outer div doesn't even exist at all. It's going to give you the exact same layout as if that div didn't exist, but we still get the benefits of, for example, being able to hover over that div and have things happen. Now, you will notice when I hover, technically nothing is actually happening. The reason for that is because this display contents essentially removes that div entirely from the DOM. It's like it doesn't exist at all. So, I'm changing the opacity of a div that doesn't exist. So, instead, I would need to modify the styles of the children. So, we'll say, "Anytime we hover over any of the children, change all of them to have an opacity of 0.5." And now, when I hover over any of these three, you can see their opacity has been changed to 0.5. Now, I do want to give a little bit of a word of warning for this contents property. You don't want to use this on things that have to be accessible. For example, if you put it on a button, you can't tab onto the button with a screen reader or just in general. Same thing with other things related to screen readers, like don't put this on a heading element and so on. Really, it's only specifically used for when you want to add extra divs for doing things like adding special effects or grouping together specific elements, but you want those elements to act as if that div wasn't there. That's pretty much the only use case for this. And you may think that's a rather niche use case, but I guarantee you there's been so many times before this property existed that I wish I could do something like this. And now that this property is out, I find myself using this rather often in projects where I have to group together elements, but I still want them to be in the same grid or flexbox container. Now, there's one other kind of unique style that I want to talk about, and this is a display of list item. So, let's go ahead and simplify our code quite a bit. We'll just have our before, middle, and our after, just like we had before. We'll have them inside of this wrapper, but I'm just going to get rid of the styles on the wrapper so they show up like this. Now, what I'm going to do is I'm going to change the display of one of these to be list item. And now, this is going to work just like a normal list. If I add a little bit of margin on this, so say margin on the left of like 10 pixels, you can actually see it shows with a dot on the left-hand side, and it works just like a normal list. And we can use some of the other list styles to actually determine, for example, what style do we want? This maybe is a decimal, and it'll show up as a decimal, and so on. So, if we want something to work like a list without actually using a list, we can use this display of list item. And this display of list item, when you use it with multiple properties, is a little bit interesting cuz it can be used both for the first and the second value of the display property. For example, I could say that I want this to be a block list item, and now it's going to give it to me as a block list item. Or I could say I want it to be an inline list item, and you can see it's modified my styles to be an inline list item. I can also say, you know what, I want this to be a list item with the flow style or the flow root style. And again, both of those are going to work just fine. So, when you're using list item, you can define either flow or flow root as the second value that you want to do it for how it modifies the children, or you can specify any value that comes before, so example, block or inline or anything else. Now, the technical terms for these first and second properties, the first property is technically called the display outside property because that's how it displays the outside of this element, while the second value, in our case this list item, is considered the display inside element. So, for example, we did flex, how do we display out the children, the elements inside of ourself? That's going to be a display inside versus display outside. Now, I did mention how you could change, for example, the inline-flex property to be multiple different keywords. Also, I'm going to show you how you can modify the inline-block property because you can actually break this up as well. This is just an inline flow root element. So, if you want to use an inline block element, but you don't want to use inline block, you can use inline flow root, and that's going to be the exact same thing. So, all of those one value properties we had before, all perfectly translate to a two value property. Now, I did mention that there's tons of different values for the display property, but a lot of them you probably shouldn't be using. For example, you can have a display here for different things related to a table. For example, table, table caption cell, column, row, and so on. And these work essentially the exact same as if you had or a table column element. Every single one of these display properties will just work exactly the same as how that would work inside of a table. You can see this actually made it completely disappear because it's not even in a table element. So, I would say if you're going to be using this type of CSS styling, you should just use the native HTML tables and table row and table column elements. Same thing with the ability to use the display of ruby. This is essentially for doing text on top of other text. So, if you have like a Japanese character and you want to put pronunciation above that character to say how you should pronounce that. This is where the ruby, ruby base, and ruby text are going to come in. But again, there's specific HTML elements for those like the ruby element, and you should use those instead. So, all of these additional CSS values for display, for example, related to table and ruby, I would completely ignore and just use the HTML elements instead. Now, I know this was a lot to cover, but the important thing is understanding how display works with two values and understanding how the contents property works. Now, if you liked this deep dive into CSS and you want to take your CSS skills to the next level, it doesn't matter if you're an absolute beginner or you're relatively advanced in CSS, I highly recommend checking out my CSS simplified course. I'll link it down in the description below. I just revamped this entire course with all modern CSS technologies, and I've added in new projects as well. So, if you're interested in really mastering CSS with these deep dives, but still in a simple to understand way, this course is going to be perfect for you. So, with that said, thank you very much for watching and have a good day.