Scribd
Upload
6 views

Css Part2

Uploaded by

asharma11046
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Css Part2

Uploaded by

asharma11046
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS Part 2[flexbox]

In this pdf , we will talk about the flexbox in css , because it important to manage the item in your website.

If you want to use flexbox in css then you need a display: flex; in the parent container[container is just like box, whick holds the
set of items] .

Now ,suppose we have two file index.html and style.css and file looks like that -:-

index.html style.css
<!DOCTYPE html>
<html lang="en"> .container{
<head>
<meta charset="UTF-8"> height: 100vh;
<meta http-equiv="X-UA-Compatible" content="IE=edge"> display:flex;
<meta name="viewport" content="width=device-width, }
initial-scale=1.0">
<title>css flexbox</title> .box{

</head> width: 100px;


<body> height: 100px;
background-color: red;
<div class="container"> color: white;
margin: 5px ;
<div class="box">box1</div> }
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
</div>

</body>
</html>

Output:
Jus fy-content -:-
In jus fy-content have different kind of parameters such as center ,flex-start ,flex-end ,space-between,space-around,space-
evenly.

But by the default jus fy-content:flex-start;

Now when you add the some jus fy-content property then result will effect like this -:-

style.css
.container{

height: 100vh;
display:flex;
justify-content:center;
}

.box{

width: 100px;
height: 100px;
background-color: red;
color: white;
margin: 5px ;
}

Output :

.container{
In style.css file , if you will replace the line
height: 100vh;
jus fy-content:center; --> jus fy-content:space-between; display:flex;
justify-content:space-between;
}

.box{

width: 100px;
height: 100px;
background-color: red;
color: white;
margin: 5px ;
}
Output:

In style.css file , if you will replace the line

jus fy-content:space-between; --> jus fy-content:space-evenly;

output:

In style.css file , if you will replace the line

jus fy-content:space-evenly; --> jus fy-content:space-around;

output:
In style.css file , if you will replace the line

jus fy-content:space-around; --> jus fy-content:flex-end;

output:

align-items-:-
In align-items have different kind of parameters such as center ,start,end .

But by the default align-items:flex-start;

Now when you add the some align-items property then result will effect like this -:-

style.css
.container{

height: 100vh;
display:flex;
align-items:start;
}

.box{

width: 100px;
height: 100px;
background-color: red;
color: white;
margin: 5px ;
}

Output:
In style.css file , if you will replace the line

align-items:center; --> align-items:end;

Output:

Flex-direc on-:-
Flex-direc on decides to item , which direc on will be arranged , in column or in row .

By the way we have four type of flex-direc on row , row-reverse, column , column-reverse .

Now by default any flexbox’s flex-direc on is row .

style.css
.container{

height: 100vh;
display:flex;
flex-direction:coloum;
}

.box{

width: 100px;
height: 100px;
background-color: red;
color: white;
margin: 5px ;
}
Output:
In style.css file , if you will replace the line

flex-direc on:column; --> align-items:column-reverse;

output:

In style.css file , if you will replace the line

flex-direc on:column-reverse; --> align-items:row-reverse;

output:

You might also like