It specifies whether the child elements of a box is
flexible or inflexible in size
Syntax:
box-flex: value;
Complete Program:
<head>
<style type="text/css">
div
{
display:box;
display:-webkit-box; /* Safari and Google Chrome */
display:-moz-box; /* Mozilla Firefox */
width:300px;
border:1px solid black;
}
#p1
{
box-flex:5.0;
-moz-box-flex:5.0; /* Mozilla Firefox */
-webkit-box-flex:5.0; /* Safari and Chrome */
border:1px solid Blue;
}
#p2
{
box-flex:5.0;
-moz-box-flex:5.0; /* Firefox */
-webkit-box-flex:5.0; /* Safari and Chrome */
border:1px solid Pink;
}
</style>
</head>
<body>
<div>
<p id="p1">My Name is</p>
<p id="p2">Mahak Gupta</p>
</div>
</body>
</html>
Output
![Box-Flex.png]()