Flexible Box Model

Flexible Box Model

 The flexible model allows us to get away from the floats. It will wrap according to the properties.
 Let’s create a simple two-column layout.

HTML:

 <div id="container"> 
 <div id="column1"> Column1content here </div> 
 <div id="column2"> Column2 content here </div>
 </div>

Syntax: css

 #container {
 background: none repeat scroll 0 0 #EEEEEE;
 display: -moz-box;
 height: 350px;
 margin: auto;
 width: 870px;
 }
 #column1 {background: #33FFFF ;}
 #column2 {background: #9900CC ;}

Example:



When we fix width of the content area #column1, let see what will happen.

Syntax: css

 #column1 {background: #33FFFF; width: 700px ;}

Example:



Note:
 Still the second column hasn’t taken all of the remaining space. By using the new box-flex property, the instruct element will take up all available space.
Syntax:
 #column2{background:#9900CC;display: block; /* cause is HTML5 element */
 /* take up all available space */
 -moz-box-flex: 1;
 -webkit-box-flex: 1;
 box-flex: 1;
 }

Example: