Justify Content in CSS:
Justify Content is very important to set elements exactly where you want in the website. There are 6 functionality in justify Content.
Justify-content: flex-start;
Flex-start is the default of justify-content. If you set a elements justify content to flex start it will set the elements in a row one by one and there will be attached with each other.
<div id="body">
<img src="mountain.png">
<img src="forest.png">
<img src="bird.png">
<img src="sea.png">
<div>
In css 👇👇
#body{
justify-content: flex-start;
}
That will set those image left to right of the page without spacing.
Justify-content: initial;
Justify content initial will set the elements at their initial position . And there initial position is just the flex start position. So there is almost no different in flex-start and initial.
<div id="body">
<img src="tiger.png">
<img src="lion.png">
<img src="wolf.png">
<img src="elephant.png">
<div>
In css 👇👇
#body{
justify-content: initial;
}
That will set those image left to right of the page without spacing. Just like flex-start.
Justify-content: flex-end;
If you set a elements justify content to flex end it will set the elements in a row one by one at the end of the webpage. Flex-start was made content start of the webpage .And it's just set content at the last of the webpage without any space between them.
<div id="body">
<img src="chair.png">
<img src="table.png">
<img src="showcase.png">
<img src="sofa.sea>
<div>
In css 👇👇
#body{
justify-content: flex-end;
}
That will set those image right of the page without spacing.
Justify-content: center;
Justify content center set the elements at the center of the webpage .
<div id="nav">
<input type="text" id="nav"
placeholder="search here.....">
<div>
In css 👇👇
#nav{
justify-content: center;
}
That will set the search box at the center of the page.
We can also do this with other html elements. Like:
<div id="body">
<img src="whale.png">
<img src="shark.png">
<img src="seal.png">
<img src="tuna.png">
<div>
In css 👇👇
#body{
justify-content: center ;
}
And that will set those picture at the center of the webpage . You can use this with any html elements you want.
Justify-content: space-around;
Justify content space around is very usefull to design your website properly . That will make same distance between all content and also outside of all content will be same spaced.
<div id="app">
<img src="book.png">
<img src="pen.png">
<img src="pencil.png">
<img src="marker.png">
</div>
In css 👇👇
#app{
justify-content: space-around ;
}
That will make you images same distance to each other inside as well as outside. It is a very intellectual way to design webpages.
Justify-content : space-between :
Justify content space around is also usefull to design your website properly . That will make same distance between all content but not the outside of them as space-around. Tha only one different between space-around and space-between is "between" don't make the elements outside space but "around" make everywhere same space.
<div id="app">
<img src="football.png">
<img src="cricket.png">
<img src="chess.png">
<img src="tennis.png">
</div>
In css 👇👇
#app{
justify-content: space-between ;
}
That will make you images same distance to each other inside but not outside.
