Realization of nine Gongge layout with CSS3 elastic box model

HTML structure:

<div class= "box" ><div class= "top" ><div class= "left" > </div><div class= "Center" > On </div><div class= "Right" > Upper </div></div><div class= "Middle" ><div class= "left" > Left </div><div class= "center" > </div><div class= "right" > R </div></div><div class= "Bottom" ><div class= "left" > Down </div><div class= "center" > Under </div><div class= " Right > Down </div></div></div>

CSS style:

. box {display:-webkit-box;/* old version, declare flexible box */-webkit-box-orient:vertical;/* old version, spindle direction */-webkit-box-direction:normal; * old version, reverse, positive sequence for normal */-webkit-box-pack:justify; /* old version, spindle on its way, both ends of the alignment */-webkit-box-align:center; /* old version, cross-axis on its way, shrink center */Display:flex; /* New, DECLARE elastic box */flex-direction:column; /* New, vertical reverse, combined with the old version of-webkit-box-orient and-webkit-box-direction */flex-wrap:nowrap; /* New, the parent element spindle size is not enough when the child element wrapping, the old version did not find the corresponding properties */Justify-content:space-between; /* New version, the main axis of its way, at both ends, and the old version of-webkit-box-pack corresponds to */align-items:center;  /* New, cross-axis of its way, contraction center, and the old version of-webkit-box-align corresponding */}.top,.middle,.bottom {width:100%; Display:-webkit-box;/* old version, declare flexible box */-webkit-box-orient:horizontal;/* old version, spindle direction */-webkit-box-direction:normal; /* old version, reverse, positive sequence for normal */-webkit-box-pack:justify; /* old version, spindle on its way, both ends of the alignment */-webkit-box-align:center; /* old version, cross-axis on its way, shrink center */Display:flex; /* New, DECLARE elastic box */flex-direction:row; /* New, vertical reverse, combined with the old version of-webkit-box-orient and-webkit-box-direction */flex-wrap:nowrap; /* New, child element wrapping when parent element spindle size is not enough, the previous version did not find the corresponding attribute */Justify-content:space-between; /* New version, the main axis of its way, at both ends, and the old version of-webkit-box-pack corresponds to */align-items:center;  /* New, cross-axis of its way, contraction center, and the old version of-webkit-box-align corresponding */}.top,.middle,.bottom,.left,.center,.right {-webkit-box-flex:0;  Flex-basis:auto;  flex-grow:0;  flex-shrink:0; flex:0 0 Auto;}.  top,.left {-webkit-box-ordinal-group:1; Order:1;}.  middle,.center {-webkit-box-ordinal-group:2; Order:2;}.  bottom,.right {-webkit-box-ordinal-group:3; Order:3;}

Briefly:

Realization of nine Gongge layout with CSS3 elastic box model