Scribd
Upload
7 views

Css Part2

Uploaded by

asharma11046
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Css Part2

Uploaded by

asharma11046
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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