<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css display flex</title>
</head>
<style>
.container {
background-color: yellowgreen;
width: 100%;
height: 500px;
/* initializse the flex box in the css */
display: flex;
/* flex direction */
/* row is the default properties in css */
/* flex-direction: row; */
/* column ki form me dikhata hai */
/* flex-direction: column; */
/* column ko reverse form me dikhta hai */
/* flex-direction:column-reverse; */
/* row ko reverse form me dikhta hai */
/* flex-direction:row-reverse; */
/* flex ko wrap kar deta hai aur width ke hisab se responsible ban jata hai */
/* flex-wrap: wrap; */
/* agar apko flex ke content ko center me lana hai row level pe to aap iska use kar sakte hai */
/* in saab ka short hand bhi aap use kar sakte hai */
/* flex-flow: row wrap; */
/* horizontally center the content */
/* justify-content: center; */
/* iska use se wo end me jata hai --> */
/* justify-content: end; */
/* flex end se end me apply hota hai */
/* justify-content: flex-end; */
/* justify-content: space-around; */
/* dono ke bich me bara bar space atti hai */
/* justify-content: space-between; */
/* equal space atti hai har content ke bich me */
/* justify-content: space-evenly; */
/* align item in the flex box */
/* column ko center lekar atta hai ... vertically property */
/* align-items: center; */
/* column ko end me lekar atta hai */
/* align-items: end; */
/* isse wo stretch hote hai aur auto sizse ko adjust karte hai */
/* align-items: stretch; */
}
.item {
background-color: tomato;
height: 50px;
width: 200px;
margin: 2px 9px;
padding: 2px 6px;
}
#item-1{
/* rearange hota hai order ke hisab se */
/* order: 20; */
/* isse wo elemenet kam aur jada hoga .... in the css flex-grow se */
flex-grow: 2;
/* isse element jaab responsive mode me jata hai taab wo automatic shrink hota hai */
flex-shrink: 3;
flex-basis: 120px;
}
#item-2{
/* order: 3; */
/* flex : grow shrink basis */
/* flex: 3 3 340px; */
/* isse wo center me jata hai */
align-self: center;
/* isse wo start position me raheta hai */
align-self:flex-start;
/* isse wo end me chala jata hai div */
align-self: flex-end;
}
#item-3{
/* order: 34; */
}
</style>
<body>
<div class="container">
<div class="item" id="item-1">First Column</div>
<div class="item" id="item-2">Second Column</div>
<div class="item" id="item-3">Third Column</div>
<!-- <div class="item" id="item-4">Forth Column</div>
<div class="item" id="item-5">Five Column</div>
<div class="item" id="item-6">Sixth Column</div> -->
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.