CSS 中使用 FlexBox(display:flex)

CSS 有個強大的排版屬性 display: flex 裡面功能很多，對我而言好用的就是下面的例子(三個 div 透過 flex:1 將 .content 平均分成三份大小一樣的div(因為 .flex 有三個)，這樣做減少了許多複雜的計算功能...

HTML:
<div class="content">
 <div class="flex1">1</div>
 <div class="flex1">1</div>
 <div class="flex1">1</div>
</div>


CSS:
.content{
 .content{
  display:flex;
  flex-direction:row;
  width:700px;
  height:150px;
  background:green;
  align-items:center;   // 垂直置中
  jusify-content:center;  // 水平置中
  flex-wrap:wrap;  // 超過允許換行
}

.flex1{
  width:50%;
  display:flex;
  color:green;
  font-size:24px;
  justify-content:center;
  align-items:center;
}

.flex1:nth-of-type(1){
    flex:1;
    background:red;
}

.flex1:nth-of-type(2){
    flex:1;
    background:yellow;
}

.flex1:nth-of-type(3){
    flex:1;
    background:blue;
}