/** Horizontal or vertical distribution 
body{
  display: box;
  box-orient: horizontal;
}
**/

/** Reversed distribution
body {
  display: box;
  box-orient: vertical;
  box-direction: reverse;
}
 **/

/** Explicit distribution **/
body {
  display: box;
  box-orient: horizontal;
  box-direction : reverse;
  
}
#box1 {
  box-ordinal-group: 2;
  background-color: #ffcccc;
}
#box2 {
  box-ordinal-group: 2;
  background-color: #ccffcc;
  
}
#box3 {
  box-ordinal-group: 1;
  background-color: #ccccff;
}

/** All boxes are flexible**/
body {
  display: box;
  box-orient: vertical;
  box-direction : reverse;
  
}
#box4 {
  box-flex: 2;
   background-color: yellow;
}
#box5 {
  box-flex: 1;
  background-color: red;
}
#box6 {
  box-flex: 1;
  background-color: blue;
}

/** Some boxes have a fixed size**/
body {
  display: box;
  box-orient: horizontal;
  width: 400px;
}
#box7 {
  box-flex: 2;
  background-color:  #6cbb3c;
 
}
#box8 {
  box-flex: 1;
  background-color:  #6cc417;
}
#box9 {
  width: 160px;
  background-color:  #4cc417;
}