डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Flex Box Model
Box 1
Box 2
Box 3

CSS में Flex Box Model के लिए बहुत ही बढ़िया properties का इस्तेमाल किया जाता है | Flex Box Model का इस्तेमाल Responsive Web Design को create करने के लिए किया जा सकता है |

जब Flex Box Model नहीं था तब Browser में float और कुछ positioning properties का इस्तेमाल किया जाता था | लेकिन CSS3 के लिए Flex Box Model की properties का इस्तेमाल करके आप आसानी Flexible Element(Container) को create कर सकते है |

अगर आपको flexible Website को create करना है तो flex box model का इस्तेमाल कर सकते है | Flex Box Model में मुख्य काम ये parent element द्वारा किया जाता है | जैसे कि,

  • अगर आपके Parent Element के सभी Child Elements के बीच में equal space चाहते हो तो Flex Box Model का इस्तेमाल कर सकते है |
  • अगर आपके Parent Element के सभी Child Elements अगर vertical centerting के साथ बीच में equal space के लिए Flex Box Model का इस्तेमाल किया जाता है |

Example for Flex Box Model

Example पर display और justify-content इन properties के मदद से Flexible Container के Child Elements के बीच में justify-content property से equal space दिया गया है |

<style>
.flexBox{
 display : flex;
 justify-content: space-between;
 background-color : #000;
}
.box{
 margin : 10px;
 height : 150px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
Output :
Box 1
Box 2
Box 3
Box 4

Some Effective Properties for Flex Box Model


display Property for Flex Box Model

Flex Box Model के flexible करने के लिए display property के flex और flex-inline इन values का इस्तेमाल अनिवार्य होता है |

<style>
.flexBox{
 display : flex;
 background-color : #000;
}
.box{
 margin : 10px;
 height : 150px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
</div>
Output :
Box 1
Box 2
Box 3
Box 4

flex-flow(flex-direction flex-wrap) Property for Flex Box Model

flex-flow property पर flex-direction और flex-wrap इन दोनों property का इस्तेमाल किया जाता है |

<style>
.flexBox{
 display : flex;
 flex-flow: row wrap; /* try flex-flow: row nowrap; */
 background-color : #000;
}
.box{
 margin : 10px;
 height : 150px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
</div>
Output :
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7

align-items Property for Flex Box Model

align-items property से default alignment किया जाता है | अगर horizontally align(x-axis) करना हो तो justify-content:center; property का इस्तेमाल किया जाता है |

<style>
.flexBox{
 display : flex;
 align-items : center;
 height : 300px;
 background-color : #000;
}
.box{
 margin : 10px;
 height : 150px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
</div>
Output :
Box 1
Box 2
Box 3

justify-content Property for Flex Box Model

Flex Container(Parent Element) के child elements को horizonatally aligning(x-axis) के लिए इस्तेमाल किया जाता है |

<style>
.flexBox{
 display : flex;
 justify-content : space-around;
 background-color : #000;
}
.box{
 margin : 10px;
 height : 100px;
 width : 100px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

flex(flex-grow flex-shrink flex-basis) Property for Flex Box Model

flex child element ये flex container(parent element) पर बचे हुए space पर किस प्रकार से grow या shrink से fit होना चाहिए वो flex property द्वारा दिया जाता है |

<style>
.flexBox5{
 display : flex;
 height : 100px;
 width : 300px;
 background-color : #000;
}
.mybox5{
 flex : 1;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box" style="background-color:red;">Box 1</div>
<div class="box" style="background-color:green;">Box 2</div>
<div class="box" style="background-color:blue;">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

flex-direction Property for Flex Box Model

Flex Container(Parent Element) के child elements के लिए row/row-reverse(horizontal/x-axis) या column/column-reverse(vertical/y-axis) ये direction दी जाती है |

<style>
.flexBox{
 display : flex;
 flex-direction : row-reverse;
 background-color : #000;
}
.box{
 margin : 10px;
 height : 100px;
 width : 100px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

flex-wrap Property for Flex Box Model

flex-wrap property पर flex Container के child elements को wrap करना है या नही करना है वो दिया जाता है |

<style>
.flexBox{
 display : flex;
 flex-wrap: wrap; /* try flex-wrap: nowrap; */
 background-color : #000;
}
.box{
 margin : 10px;
 height : 150px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
</div>
Output :
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7

align-content Property for Flex Box Model

align-content property का इस्तेमाल flex container(parent element) के cross-axis पर extra space होती है तो child elements को align करने के लिए किया जाता है |

<style>
.flexBox9{
 display : flex;
 align-content : center;
 flex-wrap: wrap;
 width : 60px;
 height : 300px;
 background-color : #000;
}
.mybox9{
 height : 60px;
 width : 60px;
 border : 1px solid red;
 background-color : #FFF;
}
</style>

<div class="flexBox">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

align-self Property for Flex Box Model

align-self property का इस्तेमाल Flex Container के single child element को cross-axis पर alignment देने के लिए किया जाता है |

<style>
.flexBox{
 display : flex;
 height : 200px;
 background-color : #000;
}
.mybox{
 margin : 10px;
 height : 50px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>
<div class="flexBox">
<div class="mybox">Box 1</div>
<div class="mybox" style="align-self:center;">Box 2</div>
<div class="mybox">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

order Property for Flex Box Model

order property का इस्तेमाल Flex Container के child element को दिए हुए number के मुताबिक order को बदला जाता है |

<style>
.flexBox{
 display : flex;
 background-color : #000;
}
.mybox{
 margin : 10px;
 height : 50px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>
<div class="flexBox">
<div class="mybox">Box 1</div>
<div class="mybox" style="order:1;">Box 2</div>
<div class="mybox">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

flex-basis Property for Flex Box Model

flex-basis property का इस्तेमाल flex container(parent element) के child element के लिए length देने के लिए किया जाता है |

<style>
.flexBox{
 display : flex;
 background-color : #000;
}
.mybox{
 margin : 10px;
 height : 50px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>
<div class="flexBox">
<div class="mybox">Box 1</div>
<div class="mybox" style="flex-basis:200px;">Box 2</div>
<div class="mybox">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

flex-grow Property for Flex Box Model

flex-grow property का इस्तेमाल flex container(parent element) के child element को number के अनुसार grow किया जाता है |

<style>
.flexBox{
 display : flex;
 width : 400px;
}
.mybox{
 border : 1px solid red;
 height : 50px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>
<div class="flexBox">
<div class="mybox">Box 1</div>
<div class="mybox" style="flex-grow:2;">Box 2</div>
<div class="mybox">Box 3</div>
</div>
Output :
Box 1
Box 2
Box 3

flex-shrink Property for Flex Box Model

flex-shrink property का इस्तेमाल flex container(parent element) के child element को number के अनुसार shrink किया जाता है |

<style>
.flexBox{
 display : flex;
 width : 400px;
}
.mybox{
 border : 1px solid red;
 height : 50px;
 width : 120px;
 font-size : 20px;
 background-color : #FFF;
}
</style>
<div class="flexBox">
<div class="mybox">Box 1</div>
<div class="mybox" style="flex-shrink:2;">Box 2</div>
<div class="mybox">Box 3</div>
<div class="mybox">Box 4</div>
<div class="mybox">Box 5</div>
<div class="mybox">Box 6</div>
</div>
Output :
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6

All Flex Box Model Related Properties

PropertyDescription
align-contentflex container(parent element) के cross-axis पर extra space होती है तो child elements को align करने के लिए इस्तेमाल किया जाता है |
align-itemsFlex Container में child elements के लिए alignment दी जाती है |
align-selfFlex Container के single child element को cross-axis पर alignment देने के लिए इस्तेमाल किया जाता है |
displayflex या inline-flex value के लिए इस्तेमाल किया जाता है | Flex Container के लिए इसे देना अनिवार्य होता है |
justify-contentFlex Container के child elements को horizonatally align करने के लिए इस्तेमाल किया जाता है |
flexflex container(parent element) पर बचे हुए space पर किस प्रकार से grow या shrink से fit होना चाहिए वो flex property द्वारा दिया जाता है |
flex-basisflex container(parent element) के child element के लिए length देने के लिए इस्तेमाल किया जाता है |
flex-directionFlex Container(Parent Element) के child elements के लिए row/row-reverse(horizontal/x-axis) या column/column-reverse(vertical/y-axis) ये direction दी जाती है |
flex-flowइस property; flex-direction और flex-wrap इन दोनों property का इस्तेमाल किया जाता है |
flex-growflex container(parent element) के child element को number के अनुसार grow किया जाता है |
flex-shrinkflex container(parent element) के child element को number के अनुसार shrink किया जाता है |
flex-wrapflex Container के child elements को wrap करना है या नही करना है वो दिया जाता है |