The CSS Display Property is Changing Forever

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 and 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 multivalue 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 or a 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 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 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 a display of flex and now we're modifying how the actual children of this wrapper content are laid out so I just have three div 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 in line 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 wanted 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 in line or you need a grid to be in line 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 lay out 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 a CSS and this gives you the old 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 a CSS it's going to do a fall back 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 flex box 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 route 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 doesn't really matter because 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 to 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 because it 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 are 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 notice I actually get the exact same result and that's because Flex box and grid both create their own block formatting context so if you've ever worked with flex box 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 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 X just just make them 1fr and one 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 elements showing up we have two separate columns for all of these and I'm going to get rid

of this so we have all of our elements just like that now 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 let's 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 0.5 so now if I hover over any of these three elements you can see my opacity changes to 0.5 really common use case where you want to have a specific hover style applied to multiple elements inside of a flex box or grid container but you'll notice immediately these elements are no longer

laid out in my 2x two grid and that's because they're wrapped in a div and grid and flex box 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 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 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 content 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 2.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 Flex box container now there's one other kind of Unique Style that I want to talk about and this is the 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 we'll say margin on the left of like 10 pixels you can actually see it shows with a

DOT on the left hand side and 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 because 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 for 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 if we did Flex how do we

dis lay out the children the elements inside of our s that's going to be display inside versus display outside now I did mention how you could change for example the inline Dash 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 like a table element 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 TBL 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 bass 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 like 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 simpl 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