【justify-content & align-items & align-content】

　　三個屬性均作用於container。

　　justify-content用於控制main-axis。

　　align-items用於控制元素在單選中cross-axis中的位置。

　　align-content用於控制各行在container中cross-axis的位置。

【align-self】

　　作用於元素，控制元素在單選中cross-axis中的位置。

【示例】

1、自適應導航。

　　當小於800px時，內容為居中，當小於500px時，內容縱向排列，從上到下。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items 
 
*/
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

http://caibaojian.com/demo/flexbox/flexbox4.html

2、移動優先布局

http://caibaojian.com/demo/flexbox/flexbox5.html

參考：http://caibaojian.com/flexbox-guide.html

justify-content & align-items & align-content