Post
Ask Question

Box-Flex Property In CSS3

Box-Flex Property In CSS3

 
It specifies whether the child elements of a box is flexible or inflexible in size      
 
Syntax:
 
box-flex: value;
 
Complete Program:
  1. <head>  
  2.    <style type="text/css">  
  3.    div {  
  4.       display: box;  
  5.       display: -webkit-box;  
  6.       /* Safari and Google Chrome */  
  7.       display: -moz-box;  
  8.       /* Mozilla Firefox */  
  9.       width: 300px;  
  10.       border: 1px solid black;  
  11.    }  
  12.  
  13.    #p1 {  
  14.       box-flex: 5.0;  
  15.       -moz-box-flex: 5.0;  
  16.       /* Mozilla Firefox */  
  17.       -webkit-box-flex: 5.0;  
  18.       /* Safari and Chrome */  
  19.       border: 1px solid Blue;  
  20.    }  
  21.  
  22.    #p2 {  
  23.       box-flex: 5.0;  
  24.       -moz-box-flex: 5.0;  
  25.       /* Firefox */  
  26.       -webkit-box-flex: 5.0;  
  27.       /* Safari and Chrome */  
  28.       border: 1px solid Pink;  
  29.    }  
  30.    </style>  
  31. </head>  
  32.   
  33. <body>  
  34.    <div>  
  35.       <p id="p1">My Name is</p>  
  36.       <p id="p2">Mahak Gupta</p>  
  37.    </div>  
  38. </body>  
  39.   
  40. </html> 
Output
 
Box-Flex.png