Css Flexbox Use in Hindi

Css Flex box use in hindi
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:


<!DOCTYPE html> <html lang="en"> <head> <title>Justify-containt1</title> <style type="text/css"> .justify-cont{ padding: 20px; border: 2px solid black; display:flex; justify-content:flex-end; } .Color{ background-color: skyblue; margin: 8px; padding: 22px; text-align:center; } </style> </head> <body> <div class="justify-cont"> <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>

3. align-items property :

 
 align-items property  का उपयोग Flex items को vertically रूप से Align करने के लिए किया जाता है।

•          align-items: center | flex-start | flex-end |baseline | stretch;

Example:

<!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 :

 
Align-content property का उपयोग Flex line को align करने के लिए किया जाता है।

•          align-content: center | flex-start | flex-end | space-around | space-between | stretch;

Example

<!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>



Previous Post Next Post