Responsive Design :
Responsive website is important nowdays. Because there are many mobile user. A responsive website display in the big screen as well as mobile( with 100% width).
For responsive design we will use flexbox and grid.
Flexbox:
Flexbox is very important to make responsive website. Flexbox means flexible box.
<div class=" flex-container">
<p>This is a Nav bar. Nav is what we see at the top of a website </p>
</div>
So if we want to make this div responsive we can set the display flex.
.nav{
display: flex;
}
It is the basic of flex .There is many thing we can do with flex box.
Flex Wrap:
Flex wrap will wrap your item in your div so that it doesn't go out of it. Flex Wrap is important to make item flexible and responsive.
<div class="flex-box-container">
<img src="jpg.Tiger">
<img src="jpg.lion">
<img src="jpg.monkey">
</div>
In CSS folder:-
.App{
display :Flex;
Flex-wrap: wrap;
}
That will make the container div wrapped .The more elements will add to the div it will go automatically another line.
If you wanted to space between those image then you can just do this:
<div class="flex-box-container">
<img src="jpg.Tiger">
<img src="jpg.lion">
<img src="jpg.monkey">
</div>
In CSS folder:-
.App{
display :Flex;
Flex-wrap: wrap;
Justify-content :space-around ;
}
Flex-direction:
Flex-direction: row ; is the default of flex-direction .It set the elements in a row.
<div class="App">
<img src="jpg.Tiger">
<img src="jpg.lion">
<img src="jpg.monkey">
</div>
In CSS folder:-
.App{
display :Flex;
Flex-wrap: wrap;
Flex-direction :row ;
}
That will set those photos in a row.
If you do
Flex-direction :row-reverse;
That will make all the elements in reverse row. The first element will go at the last and the last element will came at the first.
<div class="App">
<img src="jpg.Tiger">
<img src="jpg.lion">
<img src="jpg.monkey">
</div>
In CSS folder:-
.App{
display :Flex;
Flex-wrap: wrap;
Flex-direction :row-reverse ;
}
The first image was Tiger and the last was monkey. This will maje the monkey first element of the row and the tiger last element of the row.
Flex-direction :column ; will set elements in a column.
The second element will come right under the first element. Others will do the same.
<div class="App">
<img src="jpg.Tiger">
<img src="jpg.lion">
<img src="jpg.monkey">
</div>
In CSS folder:-
.App{
display :Flex;
Flex-wrap: wrap;
Flex-direction :column;
}
That will set the photos in a column.
If you make it "reverse - column the elements will be set in reverse. The first element will go to the last and the last came first.
<div class=" flex-box">
<img src="jpg.Tiger">
<img src="jpg.lion">
<img src="jpg.monkey">
</div>
In CSS folder:-
.App{
display :Flex;
Flex-wrap: wrap;
Flex-direction :column-reverse;
}
That will set the photos in reverse of the column. The upper element will go in the down of the page and the and the downer element will go upper. That will just reverse the form.
