用css3彈性盒子模型實現九宮格布局

html結構：

	<div class="box">
		<div class="top">
			<div class="left">左上</div>
			<div class="center">上</div>
			<div class="right">右上</div>
		</div>
		<div class="middle">
			<div class="left">左</div>
			<div class="center">中</div>
			<div class="right">右</div>
		</div>
		<div class="bottom">
			<div class="left">左下</div>
			<div class="center">下</div>
			<div class="right">右下</div>
		</div>
	</div>

css樣式：

.box {
  display: -webkit-box;/* 舊版，聲明彈性盒子 */
  -webkit-box-orient: vertical;/* 舊版，主軸方向 */
  -webkit-box-direction: normal; /* 舊版，反向，正序為normal */
  -webkit-box-pack: justify; /* 舊版，主軸的對其方式，兩端靠齊 */
  -webkit-box-align: center; /* 舊版，交叉軸的對其方式，收縮居中 */
  display: flex; /* 新版，聲明彈性盒子 */
  flex-direction: column; /* 新版，垂直反向，結合了舊版的-webkit-box-orient和-webkit-box-direction */
  flex-wrap: nowrap; /* 新版，父元素主軸尺寸不夠的時候子元素換行，舊版沒有找到對應的屬性 */
  justify-content: space-between; /* 新版，主軸的對其方式，兩端靠齊，與舊版-webkit-box-pack對應 */
  align-items: center; /* 新版，交叉軸的對其方式，收縮居中，與舊版-webkit-box-align對應 */
}
.top,.middle,.bottom {
  width: 100%;
  display: -webkit-box;/* 舊版，聲明彈性盒子 */
  -webkit-box-orient: horizontal;/* 舊版，主軸方向 */
  -webkit-box-direction: normal; /* 舊版，反向，正序為normal */
  -webkit-box-pack: justify; /* 舊版，主軸的對其方式，兩端靠齊 */
  -webkit-box-align: center; /* 舊版，交叉軸的對其方式，收縮居中 */
  display: flex; /* 新版，聲明彈性盒子 */
  flex-direction: row; /* 新版，垂直反向，結合了舊版的-webkit-box-orient和-webkit-box-direction */
  flex-wrap: nowrap; /* 新版，父元素主軸尺寸不夠的時候子元素換行，舊版沒有找到對應的屬性 */
  justify-content: space-between; /* 新版，主軸的對其方式，兩端靠齊，與舊版-webkit-box-pack對應 */
  align-items: center; /* 新版，交叉軸的對其方式，收縮居中，與舊版-webkit-box-align對應 */
}
.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;
}

簡略效果圖：