CSS3 Flexbox

CSS3 Flexbox

by Nirvanachain

HTML

<div id="container">
    
  <div id="flexbox">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>

  <div id="flexbox_2">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>
</div>

CSS

#container {width:300px;}

#flexbox {
  display: -webkit-box; /* Chrome and Safari */
  display: -moz-box; /* Firefox */
  display: box;    
  -webkit-box-pack:center; /* Chrome and Safari :: Speicfy where child elements are placed when the box is larger than the size of the children */
  -moz-box-pack:center;
  box-pack:center;
  -webkit-box-align:center; /* Chrome and Safari :: Center child eleiments */
  -mox-box-align:center;
  box-align:center;    
  height: 100px;
  width: 200px;
  padding: 1em;
  margin-bottom:10px;
  background-color: gray;
}

#flexbox > div {
  -webkit-box-flex:1.0;  /* Chrome and Safari */
  -moz-box-flex:1.0;  /* Firefox */ 
  box-flex:1.0;   
  box-flex:1.0;
  box-flex:1.0;  
  width: 50px;
  height: 50px;
}

#flexbox div:nth-child(1) {background-color:red;}
#flexbox div:nth-child(2) {background-color:blue;}
#flexbox div:nth-child(3) {background-color:green;}


#flexbox_2 {
  display: -webkit-box; /* Chrome and Safari */
  display: -moz-box; /* Firefox */
  display: box;
  -webkit-box-orient: vertical;  /* Chrome and Safari */
  -moz-box-orient: vertical; /* Firefox */     
  box-orient: vertical;  
  height: 100px;
  width: 200px;
  padding: 1em;
  margin-bottom:10px;
  background-color: gray;
}

#flexbox_2 > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;   
}
#flexbox_2 div:nth-child(1) {background-color:red;}
#flexbox_2 div:nth-child(2) {background-color:blue;}
#flexbox_2 div:nth-child(3) {background-color:green;}