CSS Display FLEX vs Block, Inline & Inline-Block Explained

hey guys in this video we are going to talk about the css display property why knowing it is important for positioning elements by using the different values like block inline and inline block there is also a newer option of the display property called flex which we use for building flexbox layout and flex also provides an easier way for positioning elements in our layout you are also going to learn that very soon in this video so now if you are ready let's get started so every html element has a default display behavior here in the example we have four div elements and these elements like divs p tags or nail bars etc they have a default display behavior which is known as block level which means that once they are placed in our template they will each take the full bit of their rolls so these four div elements here are taking a 100 percent of the space of their rows even if i haven't assigned any these properties here and still they are placed on each rows because it's their default display behavior now you might think that okay if they have each 100 percent of width by default and when i assign them let's say a smaller bits to the divs then they should be placed side by side so let's assign to these boxes a smaller bit like 20 and when i save it they should be placed side by side right well as you see this is not the case and this is a common mistake that many people do even if now you assign here a smaller vis they still keep their block level display behavior regardless of an assigned smaller width or not so if you want to place them side by side then you need to assign a new display behavior let's say inline so what is inline we have seen here an example of block level elements but on the other hand there are also inline level elements by default like span or anchor tags which can directly be placed side by side because they take only the space as much as necessary so let's change our text to let's say spam and also let's clear this now as you see span tags are inline elements by default and they can be placed side by side but the downside of inline elements is that we cannot apply this or height properties because they just don't work with them and if you don't know this information then working with css can be really frustrating now there is also a third option which is display inline block and this property takes the benefits of both of block and inline level elements for example with the display inline block property you can apply both width and height properties to the elements which we can't do with inline elements and you can also place them side by side which we can't do with block level elements so let's change the display behavior to inline block and now as you can see the elements are placed side by side and the width property can also be used this approach has been used for a long time in css for alignment and positioning of elements but there is also an alternative a newer way we can use for alignment which is the flex property so what about flex well first of all using the flex property requires a parent or a container element so let's add here firstly a container div [Music] and take these boxes inside and let's give a class container okay now the benefits of the flex property can be applied only under the elements of this container but it's not going to work outside it's not going to work for this the element and normally since all divs are block level elements by default let's give our container a background color so as i mentioned these are block level elements and normally the container element does not have any effect on their alignment of these boxes but pay attention though i am assigning a display flex property to the container element and look what's happened all of these boxes are now automatically placed side by side of course the orange one not because it's outside of the flex container let's also take this inside and now all of these boxes are placed side by side without changing their display behavior because now these boxes are flex elements and the container div still takes the full width of this roth and still behaves like a block level element if you like you can also assign them like height properties or different width properties and still they will be placed side by side if you wish on the other hand you can make this flex container as an inline level flex element and all we need to do is to change this to inline flex and now as you can see the background has disappeared and it only takes the necessary space as large as its children it's still a flex container but rather than taking the full bit of the space it takes only the space as its children need using using flex is really beneficial we can even do much more with flexbox for example we can easily center these boxes with a single property called justify content and then we give a value of center and now all of the children are very easily placed in the center if you find this video useful please hit the like button and for learning more about flexbox check out the playlist of my channel which i am going to share with you guys very soon and thank you for watching

Channel: Cem Eygi Media

Views: 40,753

Keywords: css display flex vs block inline and inline-block, css display block vs inline vs inline-block, css display property, css display tutorial, css display block, css display inline, css display inline block, css display inline-block, display block in css, display inline-block css, display inline block css, display inline block, display inline, css display flex vs inline-flex, display flex vs inline-flex, display flex vs display block

Id: JtR2XKFj9tQ

Length: 6min 46sec (406 seconds)

Published: Sat Jan 02 2021