 |
| Css Flex Box Use in Hindi |
Css Flex box Use in Hindi :
नमस्ते ! कैसे हो आप सभी लोग उम्मीद करते हैं कि आप अच्छे होंगे दोस्तों आज हम सीखने वाले है Css Flexbox Properties क्या है और क्या आप नहीं जानते Css Flex box Use करना तो आज हम आपको बताएंगे Css Flex box Use कैसे किया जाता है Css Flex Box Module के लिए बहुत ही बढ़िया Properties का इस्तेमाल किया जाता है | Flex Box Module का इस्तेमाल Responsive Web Design को Create करने के लिए किया जा सकता है |
अगर आपको भी Website वेबसाइट को Responsive बनाना है तो आप flex box Model उपयोग कर सकते हैं | हम आसानी से Responsive कर सकते हैं
Flexbox Layout module चार Layout Module होते हैं:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
Flexbox Layout module float या positioning का उपयोग किए बिना Responsive Layout की डिजाइन आसानी से बनाया जा सकता है।
flex container Flex display : flex; Responsive बना सकते हैं
Css flex box properties :
• flex-direction: column |column-reverse|row|row-reverse;
• flex-wrap: wrap| wrap-reverse|nowrap
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex-box</title>
<style type="text/css">
.Flex-Container{
border: 2px solid black;
display:flex;
/*flex-wrap: wrap;*/
/*
1st flex-direction type of -
flex-direction:row;
flex-direction:column;
flex-direction:row-reverse;
flex-direction:column-reverse;*/
/*
2st flex-warp: type of -
flex-wrap:wrap;
flex-wrap:wrap-reverse;
flex-wrap:nowrap;*/
/*
3st flex-flow: row wrap;
*/
flex-flow: column wrap;
}
.Color{
background-color: skyblue;
margin: 8px;
padding: 22px;
text-align:center;
}
</style>
</head>
<body>
<div class="Flex-Container">
<div class="Color">1</div>
<div class="Color">2</div>
<div class="Color">3</div>
<div class="Color">4</div>
<div class="Color">5</div>
<div class="Color">6</div>
<div class="Color">7</div>
</div>
</body>
</html>
2. justify-content property:
justify-content property का उपयोग Flex items को align करने के लिए किया जाता है
• justify-content: center | flex-start | flex-end | space-around | space-between;
Example 2:
3. align-items property :
<!DOCTYPE html>
<html lang="en">
<head>
<title>align-items-2 </title>
<style type="text/css">
.align-items{
padding: 20px;
border: 2px solid black;
display:flex;
align-items:flex-end;
}
.Color{
background-color: skyblue;
margin: 8px;
padding: 22px;
text-align:center;
}
</style>
</head>
<body>
<div class="align-items">
<div class="Color">one</div>
<div class="Color">tow</div>
<div class="Color">three</div>
<div class="Color">four</div>
<div class="Color">five</div>
<div class="Color">six</div>
<div class="Color">seven</div>
</div>
</body>
</html>
4. Align-content property :
<!DOCTYPE html>
<html lang="en">
<head>
<title> align-content-3</title>
<style type="text/css">
.align-content{
padding: 20px;
border: 2px solid black;
display:flex;
align-content:space-around;
}
.Color{
background-color: skyblue;
margin: 8px;
padding: 22px;
text-align:center;
}
</style>
</head>
<body>
<div class="align-content">
<div class="Color">one</div>
<div class="Color">tow</div>
<div class="Color">three</div>
<div class="Color">four</div>
<div class="Color">five</div>
<div class="Color">six</div>
<div class="Color">seven</div>
</div>
</body>
</html>
Post a Comment