0:00:00
What is up everybody welcome back to the channel today? I’m gonna walk you through the display properties panel inside of oxygen I’ve gotten a lot of emails. I’ve seen a lot of people asking questions in the oxygen community about the different types of display properties flex block in line block in line flex What do these mean what do they do and I do want to point out that this isn’t just like a fundamentals video for beginners If you are experienced with building website or CSS even advanced perhaps it’s probably a good video for you to watch because Here’s the thing and I think this adds to the confusion that a lot of people experience These display properties inside of oxygen do not behave the same as when you use them in the real world For example if you were just coding a website and writing CSS from scratch The display properties behave one way and then when you go into oxygen they they behave a different way And I’m gonna explain why that is and we’re gonna go over what those quirks actually are So that by the end of this video you will have a really solid understanding of what all the display properties are and how they work and how they behave Uniquely inside of oxygen or really why when you click a certain display property It doesn’t do what you expect it to do So let’s go ahead and I’m gonna screen share got the training site pulled up here All right with a little editing magic. We now have a I didn’t want you guys to have to watch me just do you know nonsense Which is building a section for each part of this tutorial?
0:01:35
So I cut and T.R.Y. are back ready for action So first thing I want to do we’re gonna just click on this first section go to advance go to layout and then I want I want you to just look at the display properties that are available to you You have four basic display properties. You have three advanced display properties the basics are block Which is right here in line block in line and none and then the advanced display properties are flex in line flex and grid One really important thing to note is that when you’re using the the basic display properties You apply those to individual elements So if you want to manipulate that individual element you apply the display property to it if you’re using the Advanced display properties like flex in line flex and grid those are applied to containers of elements right if you want to If you have like six images and you want to make them into a grid You don’t apply display grid to each image you put the images in a container and you put display grid on the container The same thing is with flex box right if you want to align items inside of a container You put the flex rules on the container now you can certainly do You can override the flex box controls or the grid controls at the item level But primarily when using those advanced display properties you are you’re definitely starting at the container level versus with the basics It’s applied to individual elements only So let’s take a look at display blocks since that’s the easiest and in fact a lot of elements in CSS are display block by default For example a heading this is a heading right here and it is display block by default except in oxygen So we have to immediately get into the conversation of Here’s how things work in the real world and here’s how things work in oxygen world and so if you take a look at a Heading I’ll just show you right now. We’re going to do a background color So I’m going to put a background color on here and Let’s do blue Just do something super ridiculous and ugly. So there is a blue background now If this heading were truly display block Even though the text doesn’t go all the way across the screen that blue background would go all the way across the screen Things are blocked by default because there needs to be a natural stacking order certain elements are expected to stack on top of each other If I duplicated this heading I would not want this heading to be next to this other heading right?
0:04:10
You don’t typically put a heading next to another heading you put a heading and then another heading below it like an H2 and then an H3 and then an H4 So those are block level elements paragraphs are block level elements You don’t have paragraphs next to each other unless you force them to do that But naturally a paragraph should come before another paragraph or a paragraph should come after another paragraph All the way down the page and if you have headings in there is headings paragraph paragraph heading paragraph these things don’t go next to each other They’re not in line Naturally naturally they should flow on top of each other That’s basically what display block does display block a block level element takes up all the available space across So that another item will automatically and always go below it unless you change from display block to something else But the natural order is display block in oxygen you see that that is clearly not happening and in fact If I go to this heading and I go to layout and I force it to be a block it will not become Display block and I’m going to go ahead and save this and take a look at this on the front end so that we can inspect the code because I do think there’s Something important there for us to learn So we’re going to go to the front and we’re going to right click on this heading and You can see that it’s an h2 you can see right here that it is set to display block. This is not a Rule that’s being overwritten by any other rule in fact if I put important on it which is supposed to Force this thing to do what I’m telling it to do at all costs. It’s still not doing anything and Here’s the reason When you add a section in Oxygen or a div this even happens to blank divs in oxygen Oxygen sets the display of that container to flex now remember I said advance the SS display properties like flex box Manipulate their child elements So these headings because they’re in a container that is set to display flex are being manipulated They are not allowed to be displayed block right they they actually Behave as if they’re display inline block which we’ll talk about in a minute So if you wanted them to Display block and you’re gonna see in a minute we’re gonna run into this issue when we try to use display inline and display inline block Same issues caused by oxygen Now I will say that some people do see this as a benefit but and I don’t think there’s a Necessarily a pro or con either way you just have to know what’s happening because if you don’t know what’s happening That’s where you’re gonna get really frustrated Because things are just not gonna behave the way you would expect them to behave and if you’re coming from another builder that doesn’t Set display flex by default or you’re coming from writing your own code and you’re used to things behaving the way They’re supposed to behave in CSS and you come to oxygen then yet you’re gonna get confused You’re gonna get frustrated and you’re not gonna know what’s going on or it’s at least good It’s gonna take you some investigation and that’s a bunch of wasted time obviously So the reason these things again are not behaving as as they as we intend them to behave is if we click on this CT section in a rap which is the div inside of a section Oxygen section is actually two elements. It’s the section rapper itself and then there’s an inner div inside of it That’s you’ll see your people complain about that that is in my opinion proper HTML structure for creating sections So no problem with that whatsoever. That’s how it is supposed to be but this inner rap is in fact set to display flex and the flex direction is column which also Goes against standard defaults the default for display flex is actually row And you’ll see these are trying to go side by side, but they’re not quite making it there But if we put the flex direction of column back active again, you’ll see that this is the default inside of oxygen So what we have to do if we want these elements to Behave as display block which is what we’re telling them to do we have to reset This section back to it’s what it what should be its default or its natural state which is Block itself. All right, so I’m gonna click on the section here. I’m gonna go to layout and I’m gonna go to block Now you see these are actually behaving like block level elements This is exactly what a block level element does it takes up the entire width of the available space Now you’re probably saying to yourself Kevin you just told me that basic display properties don’t get assigned to the parent And you’re right and I wasn’t this is not a contradiction We’re only assigning block to the parent because it was previously assigned something else It was not allowed to be its default state block is supposed to be its default state So we’re just resetting it back to its default state. We’re not adding any Manipulation to it right if we were adding manipulation it would be we’re adding grid or we’re adding flex And that’s what oxygen does by default it adds manipulation We’re just getting rid of the manipulation now It’s back to what it was supposed to be in the very beginning and now you can see the elements inside of that section are Actually behaving as intended display block takes up all the available space and everything will stack underneath it So the next one we’re gonna move on to is display in line So we’re gonna take two block level elements and we are going to make them appear side by side So the first thing that we’re gonna do is we’re going to add a div So this div is gonna contain our two elements and we’re gonna set these elements to display in line so we can do this with links now links in In CSS our display in line by default. They should if you put two links side by side and in fact I’ll just I’ll whoops not code Academy. That is an amazing site by the way Code pin dot IO is where I will go to prove this to you and I’m just going to do an a a-treff and Here we go and this is a link and Then I’m just gonna copy that and I’m gonna paste it and we’re gonna see what the output is two links side by side because links by default are display in line This makes perfect sense by the way if you’re writing a paragraph of text. This is my text this is my link and There’s my end of my paragraph and then I’m just gonna grab that real quick. This is my link. Okay You need you you can’t force a link inside a paragraph to a new line. It’s gonna completely break the how the paragraph Behaves right so these are naturally in line the reason I am using links as an example for display in line Even though they’re in line by default is because we’re going to run into another oxygen caused issue with this display flex rule so I’m gonna add a link just a text link and This is my link now if I duplicated this link and We were doing this in the real world not in oxygen the next link would show up beside this link except it doesn’t in oxygen they Up here one on top of the other you just saw in code pin that this is what’s supposed to happen right here in Oxygen this is what’s happening right here and again This is where I say people get confused they’re used to how things work in the real world They’re not really working that way in oxygen and then someone’s like okay, well, well, let’s go force them to be side by side So they go to advanced they go to layout they click in line and then they go to this one They’re like I didn’t work. Let me do it on this one too just to make sure in line Nothing is happening so we’re gonna hit save We’re gonna go back to the front ends We’re gonna take a look at what is going on here. So I am going to inspect I can see that my Let’s go into this div here’s my two links right here and I can see over here that they are in fact set to display Inline but they are not displaying in line. Why is that because just like sections a div in oxygen Has display flex flex direction column the flex is Overriding what the individual elements are trying to do and it’s governing them It’s telling them hey no you’re supposed to display as a column everything in this container is supposed to display in a column That is what oxygen is telling it to do by default So how do we fix this how do we make these links behave and actually be in line and you could be doing the same thing with buttons It doesn’t really matter what the elements are You have to override that default flex you have to put display block on your container Something you normally would not have to do because a div is a block level element by default Except in oxygen where it’s not a block level element by default So we have to set this to block and immediately when I do that the elements inside start following their own rules Which at this point you don’t even need the display in line because remember I told you links are display in line by default So there we have display in line Now display in line does have some problems So let’s do a button because this is one of those situations where a lot of people are like how do I get side by side buttons?
0:14:03
And I’m not saying that this is the way to do it. Okay. There are better ways to do it than this But it’s a good example because it’s gonna break and I want you to see it break so that we can fix it And you can see the difference because this is gonna take us right into the next one So I will duplicate that there’s my two buttons side by side. So this is gonna be Button number one. This is gonna be button number two. Okay, perfect and then let’s see if these have Okay, this is set to layout block and then I want to lay out in line There you go lay out in line. Okay, those are still being I had to force them to be in line even though they’re technically Inline by default because oxygen is still there’s an inheritance issue going on Where it’s still inheriting some of the flex properties. So Setting it to in line is is exactly what we are getting at now now I want I don’t know if I can yeah, I can can you all see that border The the buttons because their display in line are now Disrespecting the div they’re actually flowing outside of the dip they’re breaking the div And this is because they have padding but the div isn’t recognizing that because that’s how in line works And if I now say well, I want this to be that 30-rem or whatever we were gonna do Notice I cannot set a width I cannot set a height I can’t do anything to these buttons because They’re in line and that’s how in line works So that’s gonna bring us into our next one below let me zoom out that’s crazy Okay, so I’m gonna take that div with my in line buttons and I’m gonna duplicate it I’m gonna drag it down into display in line block So here’s the difference between in line and in line block An in line block element behaves like a block element except for the fact that it can be in line Right, so if I change these buttons so I got to lay out instead of in line we choose in line block look Now the div is able to like it’s respecting the the div, okay?
0:16:11
So now I go to in line block boom and or the div is able to wrap itself successfully around the buttons I don’t know the best way to explain that to you, but now because it’s in line block There’s still in line. They’re still side by side However watch this I can now manipulate them I can do whatever I want in terms of their dimensions and Everything around them will be influenced by that whereas when I was on in line I couldn’t do any of that so in line block gives you block abilities But also allows things to be in line with one another, okay? Where remember typical display block it forces everything below It forces everything to the next line All right, so that is in line blocks There’s we’ve gotten three of our basics out of the way all right the next one is display none this one is super easy But there is a little Point of confusion in here for some people so I’m gonna add two different buttons This one is gonna be called display none this one is gonna be called visibility Hidden and then I’m going to add one more button. Let’s just duplicate and Then this one is gonna be called button just like that so Display none we’re gonna go to advanced layout display none. It makes it disappear, okay?
0:17:33
We’re gonna go visibility hidden. We’re gonna go to advanced layout under visibility. We’re gonna choose hidden now What is the difference that you just saw between those two? properties the display none Disappeared and the space that it was taking up Disappeared also with visibility hidden the button disappeared, but the space is still reserved and if we look at the front-end code Let me get our Front-end here So if we actually look at the code inspect Open our div We see that that display none is grade out which means that it doesn’t actually exist But dev tools is telling me that it’s there and then the one that’s visibility hidden in fact You can see it right there. It tries to highlight it on the on the page. It is not grayed out It is still there. It’s just not visible. That is the big difference between display none and visibility hidden You don’t want to use visibility hidden when you really want something to be gone If you just want it to be not visible that’s when you use visibility hidden if you want it to actually be gone gone Then display none is the appropriate thing to use So that’s just a you know, that’s easy. It’s basics. It’s fundamentals, but there is a quick caveat there All right, let’s move on to display flex now Flexbox is super advanced. I’m not going to go into advanced flexbox controls But I do want you to be familiar with flexbox and I want you I want to encourage you to play a little bit of a game with flexbox so that you can learn it a little bit better But I’ll go over the basics So first thing I’m going to do just so we have more real estate here is I’m going to put a height 70 class on this Container and that’s going to give us Room to work with our flexbox. So right now I’m going to display flex have this heading you can see by default It’s in the top left corner Let me remind you that oxygen set sections to display flex by default So we don’t actually have to do anything to get display flex. It’s it’s already there by default But if you go to layout and then you choose flex and you choose column and you choose Flex start for justify that would be the default right there and as you can see I just click three buttons and nothing happened because all I did was just mirror what’s already the default So here we go layout or flexbox versus grid when it comes to layouts if you want to position items On a page or in a container just control their position where they are How they interact with each other flex box really powerful really really powerful in fact when we did the inline buttons up up top You remember that flex box would be really great for that of course you can also use grid Grid is best when you need elements to be laid out in an even grid now the grid doesn’t have to be even We’re not going to get into the advanced aspects of grid either But if you need column based layouts if you need grid based layouts then CSS grid is the way to go if you’re positioning actual elements inside of a container That’s where you’re going to want to be using flex box. That’s again, there’s that’s just the dumbed down way to do it, okay?
0:20:57
Way to explain it so Let’s start with the four corners what I call like the four corners Game which is we have to make this heading right here touch all four corners or like move from corner to corner So that we can practice our flex box controls So let’s take a look at justify first and I will say this right off of the bed Flex box whoever created it did an absolutely awful Job of naming how these things behave we have the two main things that you’re going to want to pay attention to are align items and justify content now in my opinion this should be align content and justify content or Align items and justify items make them just make them have the same terms, okay? They don’t once called align items and one called justify content because down here you see align content and Now everybody’s super confused you’re gonna be more confused by the fact that justify Means something different depending on the primary axis of the flex, okay? We have so let’s go to the axis Topping we have two different axes to work with you have a column axis up and down You have a row axis side to side and you need to set a primary axis when you’re using flex box Column in oxygen is the default row is the default in the real world. Okay, so that’s another point of confusion So column is the default inside of oxygen. We’re gonna stick with column for right now when you are Trying to move things along the primary axis you need to use Justify, okay? So that’s justify content moves items along the primary axis So I will show you flex end where is the end of the primary axis? Well, it’s a column So the end of the primary axis is right here. So if I hit flex end It moves to right there it moves to the end of the primary axis now. I’m gonna make it go back to the start Now watch this I’m gonna change the primary axis to row So where is flex end now flex end now is this corner the end of the new primary axis?
0:23:17
Which is row? So if I hit flex end on the same control? I’m not using a line content instead. I’m not doing a line items I’m still using justify the same thing I did before remember flex end a minute ago made this come down here Now it’s gonna make it go over there Justify follows the primary axis Align items Follows the alternate axis. So we’re gonna take a look at how that works But you can see now why the confusion really comes in justify content is the primary axis align Items is the secondary axis this the two axes should have the same terminology Don’t you agree like that’s how I think it should be so let’s put it back to column. Let’s put it back to flex start All right, so again justify primary axis. Let’s make it go to the end So if we want it over here without changing it to row We can just use a line items flex and we’ll now respect the secondary axis now some people say use flex box if you only want Control over one axis, but really flex box gives you control over both axis So I don’t like that description of flex box versus grid grid is a multi-axis Display property as well, but in my opinion so is flex because you have Control over both axes in flex box. So some people will use that as the as the differentiator I don’t because it’s just not true. All right, so We have column. Let’s go back to the beginning. So we have flex start flex start. Okay, there we go So if I wanted to go to this top right corner without Changing it from column to row. How do I do that? I don’t use justify because that’s not the main axis It’s the secondary axis. So I use a line flex end sends it all the way over to this corner So you guys can play with making these items touch all four corners Flex start flex start and then if I wanted to go down here Let’s go flex start justify content flex end flex end brings it down here So I’m touching all four corners once you’ve done that then you can start playing with center and center So now you can see how justify moves it up and down So now I’m vertically centering things or vertically ending things or vertically starting the content or I can bring it left to right using the align items axis. Okay, so that’s how columns versus row works in flex box That’s how align items and justify content work. Let’s add more than one item now. So let’s go Let’s switch to an image Again, this is just the basics of flex box guys. This isn’t even the the advanced stuff Okay, so we’re going to Select the image. Thank you. All right. Let’s go with 20 rim So there’s my image and I’m going to duplicate it awesome So now let’s see how it behaves with two different elements inside so if I switch that to row Obviously they are going to go side by side now. Let’s take a look at Why because they actually should be Lay out flex row Flex start flex start. Let’s see why they’re not and this may be an oxygen 4.0 thing because In the other version of oxygen these do behave properly. All right. Let’s see what’s going on here Okay, what’s this this has a oh It’s okay. It’s because I have owl spacing on this container Yeah, that will definitely mess things up. Okay, so now they are properly. Sorry. It wasn’t an oxygen 4.4 But look I jumped to like blaming oxygen. I’m like probably a 4.0 thing All right, so here’s our two elements side by side Notice that as I play with their alignment if I go you know flex in for example They simply move together now another couple properties here is space between and space around which are Super helpful so you have space between which will put those opposite of each other and this is a justified property Which means it respects the primary axis?
0:27:34
So if I change this from row which it is right now to column Take a guess what’s gonna happen? This one is gonna come down here. So I change it to column there it is now They’re apart from each other, but they’re on the new axis right because I’m using justified content space around Brings them in just so it can have even space on the outside of the elements as well And if I switch to row the same thing would happen. It’s gonna leave gaps on the outside Okay, so that’s how this works with multiple items inside Now let’s set it back to flex start and let’s make a lot of items because I want you to see how flex box Actually will allow you to break a Container so I’m just gonna duplicate this a lot and you’re gonna see it goes completely off the edge of the screen This will happen to you in multiple occasions in when you’re doing things in oxygen It may happen if you set a width on a div that has social icons in it and you’re using flex box And you add too many social icons it’ll break out the side of the div So I want you to know how to fix it, okay? There is a property with flex box called wrap and you can choose whether items will wrap in a Flex box container or not wrap in a flex box container Obviously the default here is not wrapping so we have to go to advanced layout and under Flex, let’s see down here with flex wrap You’re gonna see no wrap wrap wrap reverse so I’m gonna click on wrap and you’re gonna see that suddenly my Whole problem is fixed right this does not break that I can’t scroll left and right anymore I actually you guys can see my finger going left to right on the mouse I can’t scroll left to right anymore everything is behaving as it normally would Except you do see a new problem when you wrap elements inside a flex box container There seems to be a lot of space between these items these items are not that tall right there is a giant gap here And this is where we come into the align content properties So the way that I think about align content is in my mind I translate it into align lines because here’s here’s the thing If I take off let me let me delete these real quick, so I’m gonna just delete Few of these and I’m gonna take off the wrap There’s a lot of confusing stuff with flex box. I’m gonna take off the wrap now watch a line content will do absolutely nothing See and people do this if I what in the world like what what is this supposed to do and you would think it would do Something because justify content did something why wouldn’t the line content do something?
0:30:14
Because the line content only applies to multiple lines inside a flex box With the caveat of if you put flex box wrap on here It acts like there’s multiple lines and then suddenly this will start start working But really what this is typically for is because when you’re wrapping content Let’s go back to our wrapped lines. Well, you see it right there, okay? So lay out let’s take off flex start That’s where we were a minute ago where I said see there’s a giant space between all of these images That’s where align content comes into play so if you want the lines all of the lines to jump to the Head of the container the start of the container you do flex start now that bottom line jumped up now all lines are forced to the top If I do flex end all lines will be forced to the bottom of the flex container If I center them they’ll be forced to the center if I do space around I pretty much get what we had before and then you can Also do stretch which doesn’t really apply based on the structure of what we’re doing here so Align content again in my mind and I the reason I say align lines is because it also reminds me that it only works when there’s multiple lines Or when we’re wrapping the flex box items so that hopefully that’s that’s helpful to you But that’s what a line content does even though justify content does something like totally different and works without wrap and all that good stuff Okay, so I think that’s that covers like the basics of flex box I will say this like get a blank container on a page and just play around with the flex box controls like I’m doing here That’s a lot better than just using flex every now and then to problem solve while you’re building websites Like it’ll actually teach you how this stuff behaves and the little caveats and intricacies of flex box It’s definitely worth doing like to spend 30 minutes and you’ll be a lot more confident with how flex box works Now let’s come down and take a look at display inline flex like what in the world could that possibly mean?
0:32:17
So in order to show you what inline flex is supposed to do because I can’t do it just Because oxygen the display flex on the container is gonna break this as well So I’m gonna set this to block okay, which well I guess I already did I set them all to block by default Just we could have a clean slate all right, so I’m gonna go with a div and Notice that my div is full width because this is display block and I’m going to put in two buttons So we’ll do button and we’ll do button and then I’m gonna show you here. We’re gonna go to layout display flex Please display flex. Thank you, and I’m gonna choose row and notice I said earlier There’s a better way to do side-by-side buttons This actually is not my favorite way to do it But this is definitely one of the you know primary ways to do it the way I see a lot of people do it But this puts your button side-by-side now what if I duplicate this and I actually wanted this group of buttons To be next to this group of buttons Well by default display flex Containers are a block level element you can see it going all the way across even though it is layout display flex and So is this one so they cannot possibly be side-by-side and if I change them to inline Right they lose their flex so I don’t have flex box controls anymore So that’s where inline flex comes into play if I do inline flex it now respects The the flex here hold on we got to go inline flex row. There you go somehow lost its row I guess when I went to inline reset it all so Flex is a block level element inline flex is not it’s kind of like the yeah, it’s resetting it It’s kind of like the display block of the Wow, it’s not letting me do inline flex and row. Oh, is that a bug?
0:34:16
Look at it is switching it back to flex. I can’t do inline flex and row Inline flex you should be able to do inline flex row In fact, let’s let’s confirm that inline flex row Unless I’m mistaken. Let’s see Flexing container inline or Flexverse inline flex this will tell you if there’s any caveats flex box example here you go code pen Display flex display and look there it is there’s rows of content next to each other This is a bug in oxygen 4.0. I’m using the beta. So I mean it stands for reason that there’s bugs in beta 100% look at it switches it back. It’s not letting me do okay. Well, we can do it with column It’s okay. So I’m gonna do inline flex with a column and then on this one I’m gonna do inline flex layout Inline flex with a column and so you see oh, what just happened Oh Switch it back. Oh What’s it doing?
0:35:29
Column oh yeah, when you click column it switches it back to flex Okay, yeah, I got I got a I got a report this bug Okay, you can get get there by doing inline flex and then boom okay So we now have two flex boxes side by side that’s what inline flex is ignore the oxygen bugs I shouldn’t have unsolved 4.0 beta before doing this tutorial But nevertheless here we are as because I really do like 4.0 a lot better than the old versions So there you go that is display inline flex minus all of the bugs. Okay, let’s move on to grid And you guys have seen me do grid plenty of times But I’m gonna add a container here and I’m gonna do an image not a class. I’m gonna do an image and I’m going to browse and it’s gonna be this one and And come on please add it Please add it. Thank you. Okay, and then we will do Rim 30 and we’re gonna do wow these are all new okay Why isn’t it doing third that’s not 30 rim on my image with 30 rim Let me say hold on primary Do I need like a what’s going on here image URL? There’s the size right there. Why isn’t that size drop down?
0:36:52
They gave us new Things with like object fit and ask for it to you, but they still haven’t fixed this source set issue Okay, anyway, I digress let’s go full And I’m gonna browse I’m gonna choose the image again and I’m gonna add it and And that okay, I I cannot make this Let’s set this to Block What is this image doing size and spacing? 40 rim what in the world is another oxygen 4.0 bug size and spacing 40 rim max width 40 rim that’s not doing anything either Okay, I don’t I don’t know what I don’t know what we’re doing here. Okay All right, I feel like just adding images should work Let’s just make them little I guess okay Let’s add this in All right, I’m gonna choose my wrapper. What is it doing? I’m gonna choose my wrapper. Oh I put 40 rim on there 40 rim Was I not on the was I on the No, okay, I give up all right, so on this I’m gonna hit display grid and That’s amazing All right, and then we’re gonna make the column count three and then we’re gonna get rid of the minimum width and And there you go, so we have three images side by side in our grid and and if I continue to add images I’m just gonna continue building the same exact grid. That’s what a grid layout does at the very base now I already did a complete tutorial on display grid. I’ve used the grid builder I’ve used grid utility classes. I would urge you to go watch one of those tutorials I will probably do an advanced grid tutorial That’s probably gonna be inside the inner circle advanced flex box tutorial will go inside the inner circle This is all just covering the basics. Let’s do a quick review here We have display block elements go all the way across the screen display in line They go side by side, but you can’t control their width height stuff like that display in line block displays Block it gives you the block properties, but at the same time things can go side by side, so that’s super powerful Display none makes things disappear Visibility hidden makes them disappear, but they’re still actually there key difference there and then flex box We saw all of our different flex box controls and then in line flex you can put two flex boxes side by side There’s normally they behave like block level elements and then display grid. Obviously displays things in a nice even symmetrical grid So that is the end. I hope you guys got a lot of this video. I hope you better understand the display properties in oxygen I hope you have a better understanding of how things behave in oxygen versus how they are supposed to behave in the real world So that should clear up a lot of confusion. It should end a lot of frustration You now know that hey if I want things inside my containers to behave like I’m telling them to behave I may need to set that container to display block so that I can get rid of the flex that’s on it by default Thanks to oxygen and then we got to see some oxygen 4.0 beta bugs, too, so that’s awesome If you loved this video hit like hit subscribe drop a comment down below if you have any questions Drop those for me as well, and I will cover them in a future tutorial. All right guys. That’s it for me today. I am out. Peace
